角度2 ngClassがビュー上で更新されない

Question

バックエンドが正しく更新されているにもかかわらず、ngClassでビューを更新するのが困難です。私のコントローラは以下の通りです：

@Component({ 
    selector: 'show-hide-table', 
    template: ' 
    <table> 
     <thead> 
      <tr> 
       <th (click)="toggleHidden()"> 
        <div>Show/Hide</div> 
       </th> 
       <th [ngClass]="{\'hidden\':isHidden}"> 
        <div>Div is Shown</div> 
       </th> 
      </tr> 
     </thead> 
    </table>', 
    styleUrls: ['show-hide-table.component.css'] 
}) 

export class ShowHideTable implements OnInit, OnChanges, DoCheck { 
    public isHidden: boolean = false; 

    public toggleHidden() { 
     this.isHidden = !this.isHidden; 
     this.log.debug('Hidden', this.isHidden); 
    } 

    ngOnChanges(changes: {[propKey: string]: SimpleChange}) { 
     this.log.debug('Grid Changes'); 
    } 

    ngDoCheck() { 
     this.log.debug('Grid Check'); 
    } 
} 

「隠し」は表示付きのCSSクラスです。私がデフォルトでtrueに設定されている場合、ヘッダーは非表示になり、falseの場合は表示されるので、クラスが動作していると思います。私は尋ねるために簡略化しましたが、これは私のコードを正確に反映しているはずです。ヘッダーをクリックすると、isHidden変数の切り替えを示すログが表示されますが、非表示のクラスは変更されていません。また、クリック可能なヘッダーをクリックすると、ngOnChangesもngDoCheckも起動しません。

Answer 1

一重引用符が多すぎます。 'hidden'の前後の引用符は実際に最初の文字列を終了し、別の文字列を開始します。あなたはそれらの引用符を逃れなければなりません。

<th [ngClass]="{\'hidden\':isHidden}"> 

これはテストできませんが、動作するはずです。何らかの理由でそれがない場合は、引用符のJavascriptエンコーディングを使用してみることができます。一重引用符を\x27に置き換えます。