Angular5模板绑定,不止一次调用回调函数

Question

我试图用包含columns definition和它的结构化数据实现网格组件data array.

callback每列的定义中都有一个函数,用于自定义显示该列的值.

在每个内部callback,它调用console.log()来显示回调函数的调用次数.

我不知道为什么回调函数在开始时调用了四次,并且two times在changeSort()事件发生后!请告诉我.

我写了下面的表组件:

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.css']
})
export class TableComponent implements OnInit {

  // @Input() public grid: {
  //   columns: any[],
  //   data: any[]
  // };

  public grid: any;

  constructor() {
    this.grid = {
      columns: [],
      data: [],
    };
  }

  ngOnInit() {
    this.grid = {
      data: [
        {
          desc: 'hello 1',
          header: 'my header 1'
        },
        {
          desc: 'hello 2',
          header: 'my header 2'
        },
        {
          desc: 'hello 3',
          header: 'my header 3'
        }
      ],
      columns: [
        {
          title: 'Description',
          field: 'desc',
          sortable: false,
          callback: (value) => this.myCallback1(value),
        },
        {
          title: 'Header',
          field: 'header',
          sortable: true,
          callback: (value) => this.myCallback2(value),
        },
      ],
    };
  }

  public changeSort(field) {
    console.log(field);
  }

  public myCallback1(value) {
    console.log('myCallback', value);
    return value + ' mc1';
  }

  public myCallback2(value) {
    console.log('myCallback2', value);
    return value + ' mc2';
  }

}

它的模板是这样的:

<div class="table-responsive">
  <table class="table table-striped table-sm">
    <thead>
    <tr>
      <th>#</th>
      <th *ngFor="let col of grid.columns">
        <span (click)="changeSort(col)" *ngIf="col.sortable">{{col.title}}</span>
        <span *ngIf="!col.sortable">{{col.title}}</span>
      </th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let row of grid.data; let i = index">
      <td>{{i+1}}</td>
      <td *ngFor="let col of grid.columns">{{col.callback ? col.callback(row[col.field]) : row[col.field]}}</td>
    </tr>
    </tbody>
  </table>
</div>

这是开头的日志错误:

myCallback hello 1
myCallback2 my header 1
myCallback hello 2
myCallback2 my header 2
myCallback hello 3
myCallback2 my header 3
myCallback hello 1
myCallback2 my header 1
myCallback hello 2
myCallback2 my header 2
myCallback hello 3
myCallback2 my header 3
myCallback hello 1
myCallback2 my header 1
myCallback hello 2
myCallback2 my header 2
myCallback hello 3
myCallback2 my header 3
myCallback hello 1
myCallback2 my header 1
myCallback hello 2
myCallback2 my header 2
myCallback hello 3
myCallback2 my header 3

Answer 1

Angular处理模型和dom(组件和模板文件)之间的绑定.为此,应用程序勾选(更改检测周期)并检查是否有任何已更改的值,如果是 - >更新dom.

问题是当你的模板文件中有函数时,每个循环角度将调用函数来检查'value'是否已经改变.

例如,如果我有一个只返回值的简单get函数,Angular需要运行它来检查实际上是否有变化.

{{ myValue() }} // in the template file

myValue() { return 10 } // in the component

这里有意义的是,angular必须调用每个函数来检查值是否已更改.

解决方案(如果您不希望Angular不断调用您的函数)是实现ChangeDectionStrategy(https://angular.io/api/core/ChangeDetectionStrategy).有了这个,您可以告诉Angular您将处理更新,以及何时应该运行周期(仅针对该组件).

要在组件元数据中执行此操作,您将添加以下内容:

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush // the new line
})

然后在构造函数中:

constructor(private changeDetectorRef: ChangeDetectorRef) {}

无论何时进行更改,都可以调用this.changeDetectorRef.markForCheck(); 这将手动运行此组件的循环并在需要时更新dom.

我真的建议更多地阅读这个内容,因为这个主题太宽泛,不能在这篇文章中描述