[英]Angular4: Nested ngFor loop radiobuttons - click selects every option
有一个应用程序,我需要在其中独立选择 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'];
输出:
我接近这个错误吗? 我需要单选按钮单独(?)处于活动状态。
你给所有的无线电输入相同的值,即=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 的无线电。这应该可以完成这项工作。
您可以将输入包装成一种形式:
<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>
希望我理解你的问题,这就是你要找的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.