각도 4 재료 테이블이 업데이트되지 않습니다

Question

각도 4 재료 MatTable을 서버에서 업데이트하려고합니다. 문제는 단지 한 번만 작동한다는 것입니다.

검색 기능을 활성화하는 검색 버튼이 있습니다. 한 번 작동하고 테이블을 업데이트하지만, 두 번째 검색에서는 행 데이터를 업데이트하지 않고 목록 길이를 으로 변경하는 것처럼 보입니다.

내 Behavior는 BehaviorSubject를 올바르게 사용하지 않았거나 데이터를 어떻게 든 새로 고쳐야한다고 생각합니다. 테이블의 길이가 변경된 것처럼 보이기 때문에 (목록의 스크롤바가 짧아짐) 때 항목의 변화를 이해하지를 유발, 내가 제대로 테이블의 TrackBy 기능을 사용하지 않은 것 같습니다 데이터

import { Component, OnInit } from '@angular/core'; 
import { DataSource } from '@angular/cdk/collections'; 
import { BehaviorSubject } from 'rxjs/BehaviorSubject'; 
import { DialogService } from "ng2-bootstrap-modal"; 
import { ServerApiService } from "../../services/ServerApi.service"; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/operator/startWith'; 
import 'rxjs/add/observable/merge'; 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/observable/of'; 
import {Product} from "../../Models/Product"; 
import {Offer} from "../../Models/Offer"; 
import {OffersComponent} from "../Offers/Offers.component"; 

@Component({ 
    selector: 'app-store-stats', 
    templateUrl: './search-product.component.html', 
    styleUrls: ['./search-product.component.less'], 
    providers: [DialogService] 
}) 
/** StoreStats component*/ 
export class SearchProductComponent implements OnInit { 
    keyword: string; 
    displayedColumns = ['image', 'position', 'name', 'weight','offers']; 
    dataSubject = new BehaviorSubject<Product[]>([]); 
    dataSource = new ExampleDataSource(this.dataSubject); 
    canSearch = true; 

    constructor(private serverApi: ServerApiService, private dialogService: DialogService) { 

    } 

    showOffers(Offers: Offer[]) { 
     this.dialogService.addDialog(OffersComponent, { 
      title:'Offers', 
      modalOffers: Offers}); 
    } 

    trackByFn(index: number) { 
     return index; 
    } 

    Search() { 
     this.canSearch = false; 
     this.serverApi.getProducts(this.keyword) 
      .subscribe(
       (response) => { 
        let data:Product[] = response.json() as Product[]; 
        this.dataSubject.next(data); 
        this.canSearch = true; 
       }, 
       (error) => { 
        this.canSearch = true; 
        console.log(error); 
       } 
      ); 
    } 
    /** Called by Angular after StoreStats component initialized */ 
    ngOnInit(): void { } 
} 

/** 
* Data source to provide what data should be rendered in the table. The observable provided 
* in connect should emit exactly the data that should be rendered by the table. If the data is 
* altered, the observable should emit that new set of data on the stream. In our case here, 
* we return a stream that contains only one set of data that doesn't change. 
*/ 

var Offers: Offer[] = new Array<Offer>(); 
Offers[0] = new Offer("123123", 2,"NEW"); 
Offers[1] = new Offer("123123", 2,"Like New"); 

export class ExampleDataSource extends DataSource<Product> { 

    constructor(private subject: BehaviorSubject<Product[]>) { 
     super(); 
    } 
    /** Connect function called by the table to retrieve one stream containing the data to render. */ 
    connect(): Observable<Product[]> { 
     return this.subject; 
    } 
    disconnect() { } 
} 

Answer 1

를 새로 고칩니다.