2

我在 Angular 8 中创建父/子关系。父组件调用设置 observable 的服务调用roleList，然后我将其传递roleList给子组件。在子组件中，我尝试订阅子接收的 Input 变量并用新值实例化 MatDataTableSource。

问题是：子组件接收值但组件不重新渲染。在我调用应用程序中的更改（例如：将鼠标悬停到另一个更改状态的组件）之后，它确实显示了从服务接收到的数据。

这些是组件：

父组件 .ts：

import { Component, OnInit, ChangeDetectionStrategy } from 
'@angular/core';
import { RoleService } from '../role.service';
import { RoleTemplateList } from '../../../../core/models/role-template- 
list.model';
import { Observable } from 'rxjs';

@Component({
selector: 'kt-view-roles',
templateUrl: './view-roles.component.html',
styleUrls: ['./view-roles.component.scss'],
})
export class ViewRolesComponent implements OnInit {
roleList: Observable<RoleTemplateList[]>;
columns = ['id', 'name', 'skills', 'actions'];
actions = ['actions'];

constructor(private roleService: RoleService) {}

ngOnInit() {
    this.roleList = this.roleService.getRoles();
}
}

父组件 .html： 

<kt-portlet-header [class]="'kt-portlet__head--lg'">
    <ng-container ktPortletTitle>
        <h3 class="kt-portlet__head-title">
            <span>All Roles</span>
        </h3>
    </ng-container>
</kt-portlet-header>

<kt-portlet-body>
    <kt-data-table-new [columnsToDisplay]="columns" [data]="roleList"></kt-data-table-new>

</kt-portlet-body>

</kt-portlet>

这是我尝试订阅并使用订阅结果初始化 MatTableDataSource 的组件。

子组件 .ts：

import { Component, OnInit, Input, AfterViewInit, ViewChild, OnChanges, 
ChangeDetectionStrategy } from '@angular/core';
import { Observable, merge, of } from 'rxjs';
import { MatPaginator, MatSort, MatTableDataSource } from 
'@angular/material';
import { startWith, switchMap, map, catchError, filter, tap } from 
'rxjs/operators';

@Component({
selector: 'kt-data-table-new',
templateUrl: './data-table-new.component.html',
styleUrls: ['./data-table-new.component.scss']
})
export class DataTableNewComponent implements AfterViewInit {

@Input() columnsToDisplay: any[];
@Input() data: Observable<any[]>;
dataSource: MatTableDataSource<any>;
isLoadingResults = true;
dataLength = 0;

@ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
@ViewChild(MatSort, {static: true}) sort: MatSort;

constructor() { }

ngAfterViewInit() {
    this.sort.sortChange.subscribe(() => this.paginator.pageIndex= 0);
    merge(this.sort.sortChange, this.paginator.page)
        .pipe(
            startWith({}),
            switchMap(() => {
                this.isLoadingResults = true;
                return this.data;
            }),
            map(data => {
                this.isLoadingResults = false;
                this.dataLength = data.length;
                return data;
            }),
            catchError(() => {
                this.isLoadingResults = false;
                return of([]);
            }),
        ).subscribe(value => this.dataSource = new MatTableDataSource(value));
}

}

子组件 .html： 

<div class="example-container mat-elevation-z8">
<div class="example-loading-shade" *ngIf="isLoadingResults">
    <mat-spinner *ngIf="isLoadingResults"></mat-spinner>
</div>
<div class="example-table-container">
    <table mat-table [dataSource]="dataSource" class="example-table" matSort matSortActive="created"
        matSortDisableClear matSortDirection="desc">
        <ng-container [matColumnDef]="column" *ngFor="let column of columnsToDisplay">
            <th mat-header-cell *matHeaderCellDef>
                {{column}}
            </th>
            <td mat-cell *matCellDef="let element"> {{element[column]}} </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
        <tr mat-row *matRowDef="let row; columns: columnsToDisplay;"></tr>
    </table>
</div>
<mat-paginator [length]="dataLength" [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>

编辑：

我在app.component.ts中有ChangeDetectionStrategy.OnPush。当我将其修改为默认值时，它按预期工作。但为什么它不适用于 onPush？

4

1 回答 1

0

这是因为您正在通过合并 this.sort.sortChange 和 this.paginator.page 创建一个 observable，然后订阅该 observable 并更新 mat 表数据。这意味着，每当排序或分页发生变化时，observable 将发出一个值，并且 table 将在订阅中更新。但是，您的数据 observable 中发出的任何值都不会被处理。

解决方案：

1) 在创建 observable 时合并 this.data，这将允许订阅读取数据变化发出的值。

merge(this.data, this.sort.sortChange, this.paginator.page)

2）（首选）在发送数据时使用异步管道

<kt-data-table-new [columnsToDisplay]="columns" [data]="roleList | async"></kt-data-table-new>

子组件：

@Input() data: any[];

当组件被销毁时，异步管道会自动取消订阅 observable，以避免潜在的内存泄漏。异步管道还标记要检查的组件，如果您使用ChangeDetectionStrategy.OnPush，这将非常有用。

你可以在这里阅读更多关于它的信息。

编辑：

在 AppComponent 上使用 OnPush 也会使所有子组件的 changeDetectionStrategy 也变为 onPush。并且，在这种情况下，更改检测器仅在任何输入值更改时为子组件运行，而它不会（发出新值的 Observables 不会更改对象引用）。要手动标记组件以由 changeDetector 检查，请注入“ChangeDetectorRef”，然后在订阅 observable 的位置调用 markForCheck。

constructor(private cd: ChangeDetectorRef) { }
//in subscribe block after updating table
this.cd.markForCheck();

或者更好的方法是使用 AsyncPipe，因为它会为您做到这一点。

此外，您不应该在 AppComponent 上使用 OnPush，只将其放在您的智能组件中，这将使您更加了解处理变更检测。

于 2019-09-30T16:12:37.050 回答