Angular6：尽管绑定，但视图不更新数据更改

Question

我用 Angular material table 制作了一个自定义组件。它基本上是一个递归的table，当点击一行时显示一个subtable，当点击后面的一行时显示一个subsubtable。它需要一个递归模板。 table 输入数据非常大，采用 JSON 和 JSON 等数组的形式...这种格式由项目的其余部分决定，并且不灵活。

数据存储在名为 data 的变量中。我的 table 有输入字段来修改 data 中的条目，我检查它是否正常工作，我的问题是如果从 table 外部更新 data，table视图没有变化，没有更新。我很惊讶在将 data 传递给组件时使用绑定。我是 Angular 的初学者，对 Subjects 和 Observables 还不是很满意 table，所以我还没有朝那个方向看。

这是代码。

对于递归组件：

@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>

其中 data 是一个 JSON 对象，我不想在这里明确说明。

Answer 1

我不知道这行 this.theData = observableOf(this.array); 的目的是什么，但这就是破坏你的代码的原因（我认为导致你这样做的原因是对 Angular @Input() 装饰器和关于 Observable.of() 运算符，它使用数组的初始值发出一个事件）。

这样做会破坏 @Input() array 的引用，因此当您从父组件更新它时，模板不会更新，因为它绑定到 theData，并且 theData 仅在组件初始化时设置。

那么解决方法是：

如果 this.theData = observableOf(this.array); 有实际用途，则将 OnChanges 实施到您的组件中并将 theData 更新为 ngOnChanges()
如果 this.theData = observableOf(this.array); 没有真正的目的（我坚信它没有），那么完全删除 this.theData 并将模板绑定到 array

Answer 2

因为在您的 ngOnInit 中，您正在将 data 的类型从 Array 更改为 Observable。

在您的情况下，由于您绑定到 [dataSource]，它需要 dataSource: DataSource<T> | Observable<T[]> | T[] 类型，您可以简单地让 parent 组件通过异步管道将数据传递到你的 child 组件。

Parent:

@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();
    }
 }

Child:

@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() {
  }
}

Answer 3

Angular 2+ 是一种数据绑定方式。

因此，如果您更改根中的数据，您可以在组件内部看到更改，但在组件内部更改时，您看不到根中的更改。

你可以这样做：

import { EventEmitter} from '@angular/core';

export class YourComponent {
    @Input() item: any;
    @Output() itemChange = new EventEmitter();
  emitItem() {
      this.itemChange.emit(this.item);
  }
}

这样就可以了。

  this.itemChange.emit(this.item);

我是这样用的

  <input matInput type=number [(ngModel)]="item" (ngModelChange)="emitItem()" (input)="update($event)">

所以当项目更改时调用 emitItem，我将在根组件中进行更改。

希望对您有所帮助。

Angular6：尽管绑定，但视图不更新数据更改

Angular6: view not updating on data change despite binding

data-binding

typescript

angular

angular6