私の* ngForの最初の項目をデフォルトでアクティブにするにはどうしたらいいですか？

Question

私は

<div 
    class="states" 
    *ngFor="let state of states; let i = index" 
    [ngClass]="{'selected': showElement === state}" 
    (click)="trackCurrentState(state)"> 
    <div class="radio"> 
     <div class="outside"> 
      <div 
       class="inside" 
       *ngIf="showElement === state"> 
      </div> 
     </div> 
    </div> 
    <p2>{{state.name}}</p2> 
</div> 

角度2のラジオボタンコンポーネントを有する* ngFor、それらをループし、別のコンポーネントの内部に表示します。ロード時に、変数 'showElement'は、ユーザがラジオボタンの1つをクリックするまで、未定義を返します。したがって、ロード時にはラジオボタンのグループがありますが、ユーザーがラジオボタンをクリックするまではラジオボタンのどれも選択されません。私はラジオボタンのグループの最初のボタン（オブジェクトの配列の最初の項目）をデフォルトで選択したいと思います。ユーザーが別のラジオボタンをクリックするまで、最初のラジオボタンだけにクラス「内側」を適用する必要があります。どうすればこれを達成できますか？

Answer 1

あなたは、単に使用することができ、選択したオプションに「内部」クラスを与えるために：

<div [class.inside]="showElement"> </div> 

とオプションを事前選択します：

this.showElement = this.states[0]; 

コンストラクタまたはngOnInit、ngAfterViewInit - あなたが初期化する場所に応じてis.showElement and this.states

Answer 2

私はあなたが必要な正確に何を推測する場合、それは次のようになります。

this.showElement = this.states[0]