更新NgModel時視圖不會更新Angular 6

Question

在我的代碼中，我使用子組件中的EventEmitter更新了父組件的主目錄。

調用函數this.getPrismClientLocatorExceptions（）時，會更新ngModel，this.tableData，但視圖中的表不會使用新數據進行更新。 如何獲取視圖更新或讓childComponent檢測到此更改？

 import { Component, Input, OnInit} from '@angular/core'; import { Http, Headers } from '@angular/http'; import { Router, ActivatedRoute } from '@angular/router'; import { ClientService } from '../../Services/clientService.service'; import { TableComponent } from '../table/table.component'; // ReSharper disable once TsResolvedFromInaccessibleModule @Component({ selector: 'home', templateUrl: './home.component.html', styleUrls: ['./home.component.css'], providers: [ClientService] }) export class HomeComponent implements OnInit { columns: string[] = ['prismClientName', 'officeName', 'contr_Cmpy_NM', 'exceptionType', 'id']; @Input() tableData: PrismClientGrid[]; constructor(public http: Http, private _router: Router, private _clientService: ClientService) {} ngOnInit() { this.getPrismClientLocatorExceptions(); } getPrismClientLocatorExceptions() { return this._clientService.GetPrismClientLocatorExceptions().subscribe((data) => { this.tableData = data.json() as PrismClientGrid[]; }); } onDeleted(deleted: boolean) { this.getPrismClientLocatorExceptions(); } } interface PrismClientGrid { prismClientName: string; officeName: string; exceptionType: string; contr_Cmpy_NM: string; contractorID: number; prismClientID: number; } 

 <script> $('.dropdown-toggle').dropdown() </script> <h1>Client Exceptions By Office</h1> <div *ngIf='tableData'> <table-component (deleted)="onDeleted($event)" [data]="tableData" [displayedColumns]="columns"></table-component> </div> 

 import { Component, EventEmitter, OnInit, ViewChild, Input, Output } from '@angular/core'; import { MatPaginator, MatSort, MatTableDataSource } from '@angular/material'; import { trigger, state, style, transition, animate } from '@angular/animations'; import { ClientService } from '../../Services/clientService.service'; @Component({ selector: 'table-component', styleUrls: ['table.component.css'], templateUrl: 'table.component.html', providers:[ClientService] }) export class TableComponent implements OnInit { @Input() data: any[]; @Input() displayedColumns: string[]; @Output() deleted = new EventEmitter<boolean>(); dataSource: MatTableDataSource<any[]>; @ViewChild(MatPaginator) paginator: MatPaginator; @ViewChild(MatSort) sort: MatSort; constructor(private _clientService: ClientService) {} ngOnInit() { this.dataSource = new MatTableDataSource(this.data); this.dataSource.paginator = this.paginator; this.dataSource.sort = this.sort; } applyFilter(filterValue: string) { this.dataSource.filter = filterValue.trim().toLowerCase(); if (this.dataSource.paginator) { this.dataSource.paginator.firstPage(); } } delete(exception: any) { let cle = { contractorID: exception.contractorID, officeName: exception.officeName, prismClientID: exception.prismClientID }; this._clientService.DeleteClientLocatorException(cle).subscribe((data) => { this.deleted.emit(true); this.dataSource.disconnect(); this.dataSource.connect(); });; } } 

 <mat-form-field> <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter"> </mat-form-field> <div class="mat-elevation-z8"> <table mat-table [dataSource]="dataSource" matSort [trackBy]="id"> <ng-container matColumnDef="prismClientName"> <th mat-header-cell *matHeaderCellDef mat-sort-header> Prism Client Name </th> <td mat-cell *matCellDef="let row"> {{row.prismClientName}} </td> </ng-container> <ng-container matColumnDef="officeName"> <th mat-header-cell *matHeaderCellDef mat-sort-header> Office Name </th> <td mat-cell *matCellDef="let row"> {{row.officeName}} </td> </ng-container> <ng-container matColumnDef="contr_Cmpy_NM"> <th mat-header-cell *matHeaderCellDef mat-sort-header> Company Name </th> <td mat-cell *matCellDef="let row"> {{row.contr_Cmpy_NM}} </td> </ng-container> <ng-container matColumnDef="exceptionType"> <th mat-header-cell *matHeaderCellDef mat-sort-header> Exception Type </th> <td mat-cell *matCellDef="let row"> {{row.exceptionType}} </td> </ng-container> <ng-container matColumnDef="id"> <th mat-header-cell *matHeaderCellDef></th> <td mat-cell *matCellDef="let row"> <a mat-raised-button (click)="delete(row)">REMOVE</a></td> </ng-container> <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> </table> <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator> </div> <!-- Copyright 2018 Google Inc. All Rights Reserved. Use of this source code is governed by an MIT-style license that can be found in the LICENSE file at http://angular.io/license --> 

Answer 1

@AnkitSharma ngOnChanges用於需要更新表數據。

這是我實現的ngOnChanges函數，用於獲取dataSource以重新加載並正確顯示數據。

 ngOnChanges(changes: SimpleChanges): void { this.dataSource = new MatTableDataSource(changes.data.currentValue); this.dataSource.paginator = this.paginator; this.dataSource.sort = this.sort; } 

還必須在table.component.html中添加ngModel屬性，

 <table mat-table (ngModel)="data" [dataSource]="dataSource" matSort [trackBy]="id"> 

我還必須添加要從@ angular / core導入的OnChanges，SimpleChanges，然后更改該類以實現OnChanges。