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

发布时间：2020-12-17 17:29:53 所属栏目：安全来源：网络整理

导读：我尝试使用包含列定义及其数据数组的结构化数据来实现网格组件. 每列的定义中都有一个回调函数,用于自定义显示该列的值. 在每个回调中,它调用了一个console.log()来显示回调函数的调用次数. 我不知道为什么回调函数在开始时调用了四次,而在changeSort()事件

我尝试使用包含列定义及其数据数组的结构化数据来实现网格组件.

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

在每个回调中,它调用了一个console.log()来显示回调函数的调用次数.

我不知道为什么回调函数在开始时调用了四次,而在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.

问题是当你的模板文件中有函数时,每个循环角度将调用函数来检查’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',styleUrls: ['./table.component.css'],changeDetection: ChangeDetectionStrategy.OnPush // the new line
})

然后在构造函数中：

constructor(private changeDetectorRef: ChangeDetectorRef) {}

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!