Angular4：ネストされたngループのラジオボタン - クリックするとすべてのオプションが選択されます

Question

3xラジオボタンをフィルタ機能として選択する必要があるアプリケーションがあります。

これは私のhtmlです：

<div class="dropdown" *ngFor="let type of filterTypes"> 
    <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{type}}</button> 
    <div class="dropdown-menu byrd-shade" aria-labelledby="dropdownMenuButton"> 
     <div class="radio-group"> 
     <div class="checkbox-forms gay-flame-forms form-group radio"> 
      <label class="form-check-label"> 
       <div *ngFor="let media of filterMedia"> 
       <input *ngIf="filterMedia" 
         class="form-check-input" 
         type="radio" 
         name="filterMedia" 
         value="1"> 
       <i aria-hidden="true" class="fa fa-circle"></i>{{media}} 
      </div> 
      </label> 
     </div> 
     </div> 
    </div> 

TS：

filterTypes: any = ['Media type', 'License type', 'Verification']; 
    filterMedia: any = ['All', 'Images', 'Videos']; 
    filterLicense: any = ['All, Exclusive, Non-exclusive']; 
    filterVerification: any = ['All', 'Verified', 'Non-verified']; 

出力：

私は、これは間違って近づいているだろうか？私は、ラジオボタンを単独で（？）アクティブにする必要があります。

Answer 1

フォームでの入力をラップすることができます：

<div class="dropdown" *ngFor="let type of filterTypes"> 
<button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{type}}</button> 
<div class="dropdown-menu byrd-shade" aria-labelledby="dropdownMenuButton"> 
    <div class="radio-group"> 
    <div class="checkbox-forms gay-flame-forms form-group radio"> 
     <label class="form-check-label"> 
     <form> 
      <div *ngFor="let media of filterMedia"> 
      <input 
      *ngIf="filterMedia" 
      class="form-check-input" 
      type="radio" 
      name="filterMedia" 
      value="1"> 
      <i aria-hidden="true" class="fa fa-circle"></i>{{media}} 
      </div> 
     </form> 
     </label> 
    </div> 
    </div> 
</div> 

がうまくいけば、私はあなたの質問を理解し、これはあなたが探しているものです。

Answer 2

すべての無線入力に同じ値、つまり= 1を指定していますが、どのように区別しますか。あなたがngForの3回の反復のために

<div *ngFor="let media of filterMedia ; let i = index"> 
       <input *ngIf="filterMedia" 
         class="form-check-input" 
         type="radio" 
         name="filterMedia" 
         [value]="index"> 
       <i aria-hidden="true" class="fa fa-circle"></i>{{media}} 
    </div> 

以下のようなあなたのループの繰り返しに応じて、変数に値プロパティをバインドする必要があります 、それは値1,2と無線を作成し、3.Thatは仕事をする必要があります。