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。

更新NgModel时视图不会更新Angular 6

1 个答案: