你的代碼有點(diǎn)混亂。真的我無法想象你想這樣做，但是..
第一的。當(dāng)我們有輸入時(shí)，在 Angular 中我們使用[(ngModel)]="variable". 這使得在 .ts 中我們有變量的值，在 .html 中我們顯示變量的值。
因此，在 .ts 中定義四個(gè)變量
gender:string
impact:string
fromDate:any
toDate:any
你的“申請(qǐng)表格”必須是這樣的
Gender:<select [(ngModel)]="gender">
...
</select>
Impact:<select [(ngModel)]="impact">
...
</select>
<input type="date" [(ngModel)]="fromDate">
<input type="date" [(ngModel)]="toDate">
class="form-control form-control-sm"
name="gender"
ngModel
[ngModelOptions]="{updateOn: 'submit'}"
>
同上，當(dāng)您循環(huán)遍歷類別時(shí)，您可以使用輔助數(shù)組
categories:boolean[]=[]
并使用
<ul *ngFor="let list of dlCategory">
<div class="form-check form-check-inline">
<input type="checkbox" [(ngModel)]="categories[i]
name="{{list.name}}">
<label class="form-check-label" for="">{{list.label}}</label>
</div>
</ul>
好吧，我在之前的文章中告訴你如何“轉(zhuǎn)換”數(shù)組中檢查值的列表與檢查的值，這樣
因此，我們將創(chuàng)建一個(gè)包含 true、false 的布爾值數(shù)組，將“用戶”的屬性變成具有所選值的
<ul *ngFor="let list of dlCategory">
<div class="form-check form-check-inline">
<input #check type="checkbox"
[ngModel]="user.categories.indexOf(list.name)>=0"
(ngModelChange)="onChange(list.name,check.checked)"
name="{{list.name}}">
<label class="form-check-label" for="">{{list.label}}</label>
</div>
</ul>
onChange 變得像
onChange(option:string,checked:boolean)
{
if (checked && this.user.categories.indexOf(option)<0)
this.user.categories=[...this.user.categories,option]
.sort((a,b)=>this.dlCategory.findIndex(x.name==a)>this.dlCategory.findIndex(x.name==b)?1:-1)
if (!checked)
this.user.categories=this.user.categories.filter(x=>x!=option)
}
最后，當(dāng)我們想要顯示類別的數(shù)據(jù)時(shí)，我們可以迭代 dlCategory 并僅顯示貓是否在 user.categories 中
<div *ngFor="cat of dlCategories;let i=index>
<ng-container *ngIf="user.categories.indexOf(cat.name)>=0">
{{cat.name}}{{cat.value}}
<ng-container>
</div>
注意：我很著急，代碼可能有語法錯(cuò)誤，但我希望答案可以幫助你一些
