角材でチップを選択したときの動作が正しくない

Question

角材2.0.0-beta.12では、チップリストでチップを選択するときの動作が正しくありません。 https://plnkr.co/edit/dQKbJfgLiSjDKA6WwAZ1?p=previewを参照し、チップを切り替えるようにしてください。これは少なくとも2.0.0-beta.10で動作していました。チップを選択するとき、以前に選択された他のチップは、選択されたスタイリングを失うことがある。

<mat-chip-list class="mat-chip-list-stacked"> 
    <mat-chip *ngFor="let chip of availableColors" selected="{{chip.selected}}" 
    (click)="chip.selected = !chip.selected" [color]="chip.color"> 
    {{chip.name}} 
    </mat-chip> 
</mat-chip-list> 

と活字体：：私は私が間違って何をやってる

@Component({ 
    selector: 'chips-stacked-example', 
    templateUrl: 'chips-stacked-example.html', 
    styleUrls: ['chips-stacked-example.css'], 
}) 
export class ChipsStackedExample { 
    color: string; 

    availableColors = [ 
    { name: 'none', color: '', selected:true }, 
    { name: 'Primary', color: 'primary', selected:false }, 
    { name: 'Accent', color: 'accent', selected:true }, 
    { name: 'Warn', color: 'warn', selected:true } 
    ]; 

} 

、例えば

私はこのhtmlコードを持っています（クリック）イベントを使用していますか？配列のデータは一貫していることに注意してください。それは間違っているプレゼンテーションだけです。

Answer 1

これは、このgithubのポストであるようです。 タイムアウトにあなたのクリックコールを入れてchangedetectorrefアイテムを使用している私は何を示唆https://github.com/angular/angular/issues/6005

。

<mat-chip-list class="mat-chip-list-stacked" [multiple]="true"> 
     <mat-chip *ngFor="let chip of availableColors; let i=index" selected="{{availableColors[i].selected}}" 
(click)="changeMe(availableColors[i])" [color]="chip.color" [value]="chip.name" [selectable]="true"> 
    {{chip.name}} 
    </mat-chip> 

</mat-chip-list> 

選択はブールだった、あなたは、複数のフラグが必要とされ、それをどのように使用しているか：

changeMe(chip) { 
    let vm =this; 
    setTimeout(function() { 
     chip.selected = !chip.selected 
     vm._changeDetectionRef.detectChanges(); 
    },10); 
    } 

私はまた、HTMLで物事のカップルを変更する必要がありました。私は完全性のための価値も含めました。

フルplunkrはここにある：

https://plnkr.co/edit/qD99AN?p=preview

それが失敗した理由は、ほとんどが手動であなたの自己をしなければならないので、検出は「劇中の」電流検出と衝突された変化でした。また、どのようにそれを使用していた複数のキーワードが必要でした。 角張った素材からの制御が非常に難しいと思われます。ドキュメントも100％ではありません。 とにかくそれは今働いています、あなたのためにそれを行う場合参照してください。