綁定不能在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組件中工作

回答

相關問題