我根據資料庫獲取的值顯示多個復選框。我需要從存盤的值中檢查它們。
模板代碼
<div >
<div >
<label >Type of events <b style="color: red">*</b></label>
<div >
<div *ngFor="let event of EventTypes index as i">
<input type="checkbox"
[name] = "'EventType_' event.id"
[value]="event.id"
(change)="onCheckboxChange($event)"
/>
<div >
<label> {{ event.name | titlecase }} </label>
</div>
</div>
</div>
<div *ngIf="submitted && this.form.controls['checkArray'].errors?.required" >
Event type is required, select atleast one value.
</div>
</div>
</div>
組件代碼
EventTypes: any = [];
selectedEventIds:any = [];
...
this.userService.getEventType().subscribe((data) => {
console.log(data);
this.EventTypes = data.data;
});
....
if (results['status'] === true) {
for (let event_type of results.data.event_type) {
this.selectedEventIds.push(event_type.event_type_id);
}
...
首先，我通過迭代在復選框中顯示資料庫默認元素EventTypes。并存盤用戶選擇的值。我在 selectedEventIds. 現在我需要檢查復選框是否 id 和獲取的值匹配。
我嘗試通過添加 [attr.checked]="selectedEventIds[i] === event.id ? true : null"但它不起作用。
不知何故，我需要selectedEventIds用 current檢查每個值event.id。我怎么能在角度上做到這一點？有沒有其他方法可以根據資料庫值檢查復選框？
請指導和幫助。提前致謝。
uj5u.com熱心網友回復：
您需要添加一個函式，該函式將檢查 selectedEventIds 陣列中是否存在此事件 ID 請嘗試以下代碼。
[attr.checked]="isChecked(event.id)"
isChecked(eventId){
return this.selectedEventIds.indexOf(eventId)>-1 ? true : null
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/322401.html