Question

您好我正在尝试使用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（）会输出正确的值。我无法确定这里出了什么问题。

由于

Answer 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

Answer 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属性对网格进行排序。

希望它可以帮到你，亨利

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

2 个答案: