angular - Angular6:尽管绑定,但视图不更新数据更改
问题描述
我用Angular 材料表制作了一个自定义组件。它基本上是一个递归表,当单击一行时显示一个子表,然后单击一行时显示一个子子表。它需要一个递归模板。表格输入数据非常大,采用 JSON 的形式,带有 JSON 数组等。这种格式是由项目的其余部分决定的,不灵活。
数据存储在一个名为 的变量中data
。我的表有输入字段来修改条目data
,我检查它是否正常工作,我的问题是如果data
从表外部更新,表视图不会改变,也不会更新。data
我对传递给组件时使用绑定感到惊讶。我是 Angular 的初学者,还不太适应Subjects
,Observables
所以我还没有朝那个方向看。
这是代码。
对于递归组件:
@Component({
selector: 'app-rectable',
template: `
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="example-container mat-elevation-z8">
<mat-table [dataSource]="theData">
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef> channel </mat-header-cell>
<mat-cell *matCellDef="let element">
<button *ngIf="element.isexpandable" mat-icon-button (click)="element.isexpanded = !element.isexpanded;">
<mat-icon class="mat-icon-rtl-mirror">
{{element.isexpanded ? 'expand_more' : 'chevron_right'}}
</mat-icon>
</button>
<mat-form-field class="example-full-width">
<input matInput [(ngModel)]="element.name" (input)="update($event)">
</mat-form-field>
</mat-cell>
</ng-container>
<ng-container matColumnDef="min">
<mat-header-cell *matHeaderCellDef> min </mat-header-cell>
<mat-cell *matCellDef="let element">
<input matInput type=number [(ngModel)]="element.min" (input)="update($event)">
</mat-cell>
</ng-container>
<ng-container matColumnDef="max">
<mat-header-cell *matHeaderCellDef> max </mat-header-cell>
<mat-cell *matCellDef="let element">
<input matInput type=number [(ngModel)]="element.max" (input)="update($event)">
</mat-cell>
</ng-container>
<ng-container matColumnDef="value">
<mat-header-cell *matHeaderCellDef> value </mat-header-cell>
<mat-cell *matCellDef="let element">
{{element.value}}
</mat-cell>
</ng-container>
<ng-container matColumnDef="expandedDetail">
<mat-cell *matCellDef="let detail">
<app-rectable *ngIf="detail.element.isexpandable" [array]="detail.element.variables" [isTop]="false">
</app-rectable>
</mat-cell>
</ng-container>
<div *ngIf="isTop">
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
</div>
<mat-row *matRowDef="let row; columns: displayedColumns;" matRipple class="element-row" [class.expanded]="row.isexpanded" >
</mat-row>
<mat-row *matRowDef="let row; columns: ['expandedDetail']; when: isExpansionDetailRow" [@detailExpand]="row.element.isexpanded ? 'expanded' : 'collapsed'" style="overflow: hidden">
</mat-row>
</mat-table>
</div>
<div *ngIf="!theData.value.length" > EMPTY DATA INPUT </div>
`,
styleUrls: ['./rectable.component.css'],
animations: [
trigger('detailExpand', [
state('collapsed', style({ height: '0px', minHeight: '0', visibility: 'hidden' })),
state('expanded', style({ height: '*', visibility: 'visible' })),
transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
]),
],
})
export class RectableComponent implements OnInit {
@Input() array;
@Input() isTop: boolean;
theData = [];
displayedColumns = ["name", "min", "max", "value"];
isExpansionDetailRow = (i: number, row: Object) => row.hasOwnProperty('detailRow');
constructor() {
}
ngOnInit() {
this.theData = observableOf(this.array);
}
}
根组件 html 是
<app-rectable [array]='data' [isTop]="true"></app-rectable>
JSON 对象在哪里data
,我不想在这里明确说明。
解决方案
因为在您中,ngOnInit
您正在将类型data
从 an更改Array
为Observable
.
在您的情况下,由于您绑定到[dataSource]
,它需要一个类型dataSource: DataSource<T> | Observable<T[]> | T[]
,您可以简单地让父组件通过异步管道将数据传递给您的子组件。
家长:
@Component({
selector: 'parent-component',
template: `
<div>
<app-rectable [data]="data$ | async" [isTop]="true"></app-rectable>
...
</div>
`,
})
export class ParentComponent implements OnInit {
data$: Observable<SomeType[]>;
constructor(private dataService: DataService) {
}
ngOnInit() {
// fetch your data via the service
this.data$ = this.dataService.fetchData();
}
}
孩子:
@Component({
selector: 'app-rectable',
template: `
<div class="example-container mat-elevation-z8">
<mat-table [dataSource]="data">
...
</div>
`,
})
export class RectableComponent implements OnInit {
@Input() data: SomeType[];
@Input() isTop: boolean;
displayedColumns = ["name", "min", "max", "value"];
isExpansionDetailRow = (i: number, row: Object) => row.hasOwnProperty('detailRow');
constructor() {
}
}
推荐阅读
- php - 为什么我的 php 不回显数据库中的所有内容?
- identityserver4 - Identity Server 4:如何仅为 UserInfoEndpoint 添加自定义声明并在 AccessToken 中排除它们?
- coyote - 什么是 Coyote 框架,我可以在哪里阅读有关它的更多信息?
- function - 我可以将参数作为数组传递吗?
- html - 当屏幕改变大小时,无法使边框保持静态
- android - Android DatePicker 不会滚动超过 2100 年
- r - 将列转换为行
- asp.net-core - ASP.NET Core Identity 种子数据未持久化到数据库
- embedded - 适用于 BeagleBoneBlack 的 U-Boot 自动冗余启动
- python - 将函数输出写入文本文件