Angular4：嵌套的 ngFor 循環單選按鈕 - 單擊選擇每個選項

Question

有一個應用程序，我需要在其中獨立選擇 3 個單選按鈕（作為過濾器功能）。

這是我的 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

你給所有的無線電輸入相同的值，即=1，那么你將如何區分它們。 您應該將 value 屬性綁定到一個變量，具體取決於您的循環迭代，如下所示

 <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>

對於 ngFor 的三個迭代，它將創建一個值為 1,2 和 3 的無線電。這應該可以完成這項工作。

Answer 2

您可以將輸入包裝成一種形式：

<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>

希望我理解你的問題，這就是你要找的。