0

您好我正在尝试使用 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() 会打印正确的值，但不会影响模板。我无法弄清楚这里出了什么问题。

谢谢

4

2 回答 2

3

如果您的视图没有更新（例如，{{isReverse}}没有更改），您可能是sortData()从“外部”Angular 调用的，因此当您的点击处理程序完成时，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();
  }
  ...

另请参阅手动触发 Angular2 更改检测

于 2016-01-22T16:00:40.283 回答
1

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

因此该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该父组件的属性对网格进行排序。

希望它可以帮助你，蒂埃里

于 2016-01-22T12:50:16.980 回答