绑定在 Angular 2 组件中不起作用答案

【问题标题】：Binding not working in Angular 2 component绑定在 Angular 2 组件中不起作用
【发布时间】：2016-01-23 00:00:40
【问题描述】：

您好，我正在尝试使用 Angular 2 创建一个具有排序功能的简单网格。下面是组件的结构。

import {Component, Pipe} from 'angular2/core';
import {NgClass} from 'angular2/common';

    @Component({
        selector: "sorter",
        template: `
            <i class="indicator glyphicon glyphicon glyphicon-sort-by-alphabet"  [ngClass]="{'glyphicon-sort-by-alphabet-alt': isReverse}"></i>
            <span>{{isReverse}}</span>
        `,
        directives: [NgClass]
    })
    export class Sorter {
        isReverse = true;
        public sortData(key) {
            this.isReverse = !this.isReverse;
            console.log("Directection-->" + this.isReverse);
        }

    }

我创建了一个 var isReverse 并在 sortData() 方法中对其进行了更改。当我单击列标题时，console.log() 会打印正确的值，但不会影响模板。我无法弄清楚这里出了什么问题。

谢谢

【问题讨论】：

sortData() 是从哪里调用的？你是从非 Angular 代码中调用它吗？
有什么问题？ ngClass有什么问题吗？如果是这样，请在运行时检查浏览器的控制台。转到特定元素并做你的事情并检查天气类是否被应用......并确保glyphicon-sort-by-alphabet-alt是正确的类名。
是的，类名是正确的。但我希望将其应用于 isReverse 值的变化。排序数据方法在外部调用。那是点击作为列的元素。 Sorter 只是一个图标，在应用排序时需要更改。

标签： angular angular2-template

【解决方案1】：

如果您的视图没有更新（例如，{{isReverse}} 没有更改），您可能是从“外部”Angular 调用 sortData()，因此当您的点击处理程序完成时，Angular 不会自动运行更改检测。

解决此问题的一种方法是注入 ChangeDetectorRef 并强制它在此组件上运行更改检测：

import {Component, Pipe, ChangeDetectorRef} from 'angular2/core';
export class Sorter {
   constructor(_cdRef: ChangeDetectorRef) {}
   public sortData(key) {
    this.isReverse = !this.isReverse;
    console.log("Directection-->" + this.isReverse);
    this._cdRef.detectChanges();
  }
  ...

另见Triggering Angular2 change detection manually

【讨论】：

【解决方案2】：

根据我从您的问题和代码中了解到的情况，您似乎创建了一个专用组件来更改排序。

所以isReverse 属性在这个组件内部，不能在它之外使用。为了使这成为可能并利用两种方式绑定，我建议按照如下所述重构您的组件：

@Component({
  selector: "sorter",
  template: `
    <i class="indicator glyphicon glyphicon glyphicon-sort-by-alphabet"  
       [ngClass]="{'glyphicon-sort-by-alphabet-alt': isReverse}"
       (click)="sortData()"></i>
    <span>{{isReverse}}</span>
  `,
  directives: [NgClass]
})
export class Sorter {
  @Input()
  isReverse = true;
  @Output()
  isReverseChanged:EventEmitter = new EventEmitter();

  public sortData(key) {
    this.isReverse = !this.isReverse;
    console.log("Directection-->" + this.isReverse);
    this.isReverseChanged.emit(this.isReverse);
  }
}

在网格组件中，您现在可以访问isReverse 属性，如下所述：

<sorter [(isReverse)]="tableReverse"></sorter>

这样就可以根据这个父组件的tableReverse属性对网格进行排序了。

希望对你有帮助，蒂埃里

【讨论】：