绑定不能在Angular 2组件中工作

嗨我想创建一个简单的网格与使用Angular 2的排序功能。下面是组件的结构。绑定不能在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（）在单击列标题时打印正确的值，但不影响模板。我无法确定这里出了什么问题。

感谢

来源

2016-01-22 Vishal

哪里是'sortData（）'从叫什么名字？你是否从非Angular代码中调用它？ –

这是什么问题？ ngClass有什么问题吗？如果是这样，请在运行时检入浏览器的控制台。去特定的元素，做你的东西，并检查天气课得到应用或不....并确保'glyphicon-sort-by-alphabet-alt'是正确的类名。 – micronyks

是的，类名是正确的。但我希望将其应用于isReverse值的更改。排序数据方法是从外部调用的。这是在作为列的元素的点击。分拣机只是应用分拣时需要更改的图标。 – Vishal

从我从你的问题，你的代码明白了，看来你创建一个专用组件来改变排序。

因此，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-22 12:50:16

如果你的观点是不更新（例如，{{isReverse}}不会改变），你可能从调用sortData()“外”角，因此角不会自动运行变化检测当你的点击处理程序完成。要解决这个

一种方式是注入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

来源

2016-01-22 16:00:40

绑定不能在Angular 2组件中工作

回答

相关问题