Angular 2 - 通過ngFor創建一個布爾數組的綁定複選框

我使用ngFor動態創建項目的下拉列表，循環訪問保存在服務中的字符串數組（從SQL查詢獲得）。Angular 2 - 通過ngFor創建一個布爾數組的綁定複選框

<li *ngFor="let vehicleClasses of getVehicleClassList(); let i = index" (click)="toggleCheckBox(i)"> 
    <a> 
    <input type="checkbox" id="vehCB_{{i}}"/>{{vehicleClasses}} 
    </a> 
</li>

下拉菜單中都有一個複選框，然後選擇（{{VehicleClasses}}。如何存放這些檢查框的用戶已籤（最好是從服務而不是組件）中的名字是什麼？
理想，我想有一個存儲複選框值的布爾數組，如果可能的話，我可以將複選框綁定到一個值，例如，如果一個函數要更改所有複選框布爾值，那麼複選框會更新？

我見過ngModel用於其他類似場景 - 但我一直未能成功讓它工作。

來源

2016-10-19 fila

我很抱歉發佈問題後發佈答案如此之快。如果您願意，我可以刪除該問題 - 但是如果其他人遇到類似問題。

我沒有意識到我可以使用ngModel直接綁定到服務內的布爾數組。使用ngFor的索引符號，我可以容易每個複選框綁定到一個元件的布爾陣列內：

<li *ngFor="let vehicleClasses of getVehicleClassList(); let i = index" (click)="toggleCheckBox(i)"> 
    <a> 
    <input type="checkbox" id="vehCB_{{i}}" [(ngModel)]="toolbarService.vehicleClassCheckboxes[i]"/>{{vehicleClasses}} 
    </a> 
</li>

我直接修改布爾陣列的服務內寫的功能引起的複選框以正確更新。如果其他人有更好的方法來做到這一點，我很想知道 - 雖然這恰好適合我的情況。

來源

2016-10-19 04:10:50 fila

首先，儘量避免在綁定

*ngFor="let vehicleClasses of getVehicleClassList();

每一次變化檢測運行這種方法被稱爲使用方法和變化檢測的運行速度非常頻繁。相反，將結果分配給屬性並綁定到該屬性。

<li *ngFor="let vehicleClass of getVehicleClasses; let i = index" (click)="cbStatus[i] = !cbStatus[i]"> 
    <a> 
    <input type="checkbox" [(ngModel)]="cbStatus[i]" />{{vehicleClass}} 
    </a> 
</li>

class MyComponent { 
    @Input() set vehicleClasses(value) { 
    this.vehicles = value; 
    this.cbStatus = []; 
    for(var p in this.vehicles) { 
     this.vehicles.push(false); 
    } 
    } 
}

來源

2016-10-19 04:12:37

Angular 2 - 通過ngFor創建一個布爾數組的綁定複選框

回答

相關問題