材料表不会使用新的 @Input 值进行更新

Question

我有一个Angular Component，它采用@Input(搜索结果(，我想将其用作Angular Material表的数据源。

不幸的是，该表似乎无法识别@Input中的变量何时更改，并且始终为空。

我的工作流程是：

• 主视图由两个组件组成：搜索和搜索结果
• search定义搜索参数并从搜索服务中获取结果
• search通知main它有一个新的结果，main将结果存储在一个变量中
• searchresult获取变量@Input，并使用结果更新表

一切正常，直到console.log(this.passengerSearchReadModels);打印出正确的结果，但最后一步(更新表(没有：(

main.html

<div class="mx-5">
<app-search (notify)="onSearch($event)"></app-search>
<app-search-result [passengerSearchReadModels]="passengerSearchReadModels"></app-search-result>
</div>

主.ts

@Component({
selector: 'app-main',
templateUrl: './main.component.html',
styleUrls: ['./main.component.scss']
})
export class MainComponent implements OnInit {
passengerSearchReadModels: PassengerSearchReadModel[] = [];
constructor() { }
ngOnInit(): void {
}
onSearch(passengerSearchReadModels: PassengerSearchReadModel[]): void {
console.log('in onSearch');
this.passengerSearchReadModels = passengerSearchReadModels;
console.log(this.passengerSearchReadModels); // here the correct result is displayed in the console
}
}

搜索.ts

@Component({
selector: 'app-search',
templateUrl: './search.component.html',
styleUrls: ['./search.component.scss']
})
export class SearchComponent implements OnInit {
@Output() notify: EventEmitter<PassengerSearchReadModel[]> = new EventEmitter<PassengerSearchReadModel[]>();
searchQuery: SearchQuery;
passengerSearchReadModels: PassengerSearchReadModel[] = [];
constructor(private searchService: SearchService) {
this.searchQuery = {
lastName: null
};
this.init();
}
ngOnInit(): void {
}
init(): void {
}
search(): void {
this.searchService.getPassengers(this.searchQuery)
.subscribe(result => {
console.log(result);
this.passengerSearchReadModels.push(result);
}, error => console.error(error));
this.notify.emit(this.passengerSearchReadModels);
}
}

search-result.html:

<table mat-table [dataSource]="dataSource" matSort>
<ng-container matColumnDef="fullName">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Name, Vorname</th>
<td mat-cell *matCellDef="let element">{{element.lastName}}, {{element.firstName}}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

搜索结果.ts

@Component({
selector: 'app-search-result',
templateUrl: './search-result.component.html',
styleUrls: ['./search-result.component.scss']
})
export class SearchResultComponent implements AfterViewInit {
@Input() passengerSearchReadModels: PassengerSearchReadModel[] = [];
@ViewChild(MatSort, { static: true }) sort: MatSort;
displayedColumns: string[] = [ColumnNames.FullName];
dataSource = new MatTableDataSource<PassengerSearchReadModel>(this.passengerSearchReadModels);
selection = new SelectionModel<PassengerSearchReadModel>(true, []);
constructor() {
}
ngAfterViewInit(): void {
this.dataSource.sortingDataAccessor = this.sortingDataAccessor;
this.dataSource.sort = this.sort;
}
// sorting deleted bc irrelevant
}

#编辑search.html

<div class="shadow">
<div class="row">
<div class="col-2">
<mat-form-field>
<mat-label>{{ "search.lastname" | translate }}</mat-label>
<input matInput type="text" max="100" [(ngModel)]="searchQuery.lastName" />
</mat-form-field>
</div>

</div>
<div class="row">
<div class="col-3">
<button mat-stroked-button color="primary" (click)="search()">
<span class="material-icons mr-2">search</span>
{{ "search.searchButton" | translate }}
</button>
</div>
<div class="col-3"></div>
</div>
</div>

searchService.ts

@Injectable({
providedIn: 'root'
})
export class SearchService {
private ENDPOINT_GET = 'Passenger';
constructor(private http: HttpClient) { }
public getPassengers(searchQuery: SearchQuery): Observable<PassengerSearchReadModel> {
let params = new HttpParams();
if (searchQuery.lastName) { params = params.append('lastName', searchQuery.lastName); }

return this.http.get<PassengerSearchReadModel>(environment.API_URL + this.ENDPOINT_GET, { params });
}
}

this.sortingDataAccess或

sortingDataAccessor(item: any, property: string): any {
const columnSortingDataAccessors = ColumnSortingDataAccessor.get();
let sortingDataAccessor: string;
switch (property) {
// cases omitted for readability
default: {
sortingDataAccessor = columnSortingDataAccessors[property];
break;
}
}
return item[sortingDataAccessor];
}

我必须更改什么才能用新值更新表？

Answer 1

我在你的代码中发现了一些问题，首先你需要在加载结果后发出结果，比如下面的代码

search(): void {
this.searchService.getPassengers(this.searchQuery)
.subscribe(result => {
this.notify.emit(result );
}, error => console.error(error));    
}

第二，每次数据更改时都需要初始化新的表源，或者只需要更改数据表(mat-table(的数据源

onSearch(passengerSearchReadModels): void {
this.passengerSearchReadModels = new MatTableDataSource<any>(passengerSearchReadModels);
}

或

onSearch(passengerSearchReadModels): void {
this.passengerSearchReadModels.data = passengerSearchReadModels;
}

你可以在这里查看演示