Angular模板绑定，多次调用回调函数

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

有一个callback每列定义中的函数，用于自定义显示该列的值。

每一个里面callback，它调用了 console.log() 来显示回调函数将被调用多少次。

我不知道为什么回调函数一开始就调用了四次，并且two times after 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

Angular 处理模型和 dom（组件和模板文件）之间的绑定。为此，应用程序会勾选（更改检测周期）并检查是否有任何值已更改，如果是，则更新 dom。

问题是当你的模板文件中有函数时，每个循环角度都会调用该函数来检查“值”是否已更改。

例如，如果我有一个仅返回一个值的简单 get 函数，Angular 需要运行它来检查是否确实存在更改。

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

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

在这里，Angular 必须调用每个函数来检查值是否已更改，这是有道理的。

一个解决方案（如果您不希望 Angular 不断调用您的函数）是实现 ChangeDectionStrategy (https://angular.io/api/core/ChangeDetectionStrategy 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。

我真的建议更多地阅读这一点，因为这个主题太宽泛，无法在这篇文章中描述