绑定在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);
        }

    }

从'angular2/core'导入{Component，Pipe}；
从'angular2/common'导入{NgClass}；
@组成部分({
选择器：“分拣机”，
模板：`
{{isReverse}}
`,
指令：[NgClass]
})
出口分类分拣机{
isReverse=true；
公共排序数据（密钥）{
this.isReverse=！this.isReverse；
log（“Directection-->”+this.isReverse）；
}
}

我已经创建了一个var isReverse，并在sortData（）方法中对其进行了更改。单击列标题时，console.log（）会打印正确的值，但不会影响模板。我不知道这里出了什么问题

---

谢谢

根据我对您的问题和代码的理解，您似乎创建了一个专用组件来更改排序

因此，

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);
  }
}

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

这样，您可以根据父组件的

tableReverse

属性对网格进行排序

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);
        }

    }

希望它能帮助你，

---

Thierry

根据我对您的问题和代码的理解，您似乎创建了一个专用组件来更改排序

因此，

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);
  }
}

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

这样，您可以根据父组件的

tableReverse

属性对网格进行排序

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);
        }

    }

希望它能帮助你，

---

Thierry

如果视图没有更新（例如，

{{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();
  }
  ...

---

另请参见

如果视图未更新（例如，

{{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();
  }
  ...

---

另请参见从何处调用

sortData（）

？你从非角度代码中调用它吗？问题是什么？ngClass有什么问题吗？如果是这样，请在运行时检入浏览器的控制台。去特定的元素，做你们的事情，检查天气课是否被应用。。。。并确保

glyphicon按字母表alt排序
是正确的类名。是的，类名是正确的。但我想把它应用到isReverse值的变化上。排序数据方法在表单外部调用。即单击用作列的元素。分拣机只是一个应用分拣时需要更改的图标。从哪里调用
sortData（）
？你从非角度代码中调用它吗？问题是什么？ngClass有什么问题吗？如果是这样，请在运行时检入浏览器的控制台。去特定的元素，做你们的事情，检查天气课是否被应用。。。。并确保
glyphicon按字母表alt排序
是正确的类名。是的，类名是正确的。但我想把它应用到isReverse值的变化上。排序数据方法在表单外部调用。即单击用作列的元素。分拣机只是一个图标，在应用分拣时需要更改。