如何修复空数组

Question

我正在尝试获取客户端（id，name），但我有一个空数组。

我正在使用此代码来获取客户端以使用客户端ID和客户端名称填充我的NG-DROPDOWN。现在我得到一个空数组。

this.clientService.getClients().subscribe((response: any) => {
    for (let data of response) {
      this.clientDropdownList.push({ '_id': response._id, 'name': response.name }) 
    }
    console.log(this.dropdownList)
    }, error => {console.log("error :", error); }
);

服务：

getClients(): Observable<Client[]> {
    return this.HttpClient.get<Client[]>('/api/clients');
}

HTML：

<ng-multiselect-dropdown class="customDropdown" 
    formControlName="client"
    [placeholder]="'Select Client'"
    [data]="[clientDropdownList]"
    [(ngModel)]="selectedItems"
    [settings]="dropdownSettings"
    (onSelect)="onItemSelect($event)"
    (onSelectAll)="onSelectAll($event)">
</ng-multiselect-dropdown>

我期待客户端ID和客户端名称的答案到clientDropdownList

Answer 1

你应该删除[data]绑定并将你的clientDropdownList绑定到你的下拉列表。像这样：

<ng-multiselect-dropdown class="customDropdown" 
    formControlName="client"
    [placeholder]="'Select Client'"
    [(ngModel)]="clientDropdownList"
    [settings]="dropdownSettings"
    (onSelect)="onItemSelect($event)"
    (onSelectAll)="onSelectAll($event)">
</ng-multiselect-dropdown>

Answer 2

1. 在你的模板中，你有两个[data]="[clientDropDownList]"。对于data，您需要绑定没有括号的值。
2. 你的for... of循环没问题，但是赋值不正确，你设置数组的值而不是数组中的项。

模板代码：

<ng-multiselect-dropdown class="customDropdown" 
    formControlName="client"
    [placeholder]="'Select Client'"
    [data]="clientDropdownList" <!-- removed square brackets around the value -->
    [(ngModel)]="selectedItems" <!-- where is this coming from -->
    [settings]="dropdownSettings"
    (onSelect)="onItemSelect($event)"
    (onSelectAll)="onSelectAll($event)">
</ng-multiselect-dropdown>

组件代码

this.clientService.getClients().subscribe((response: any) => {
      for (let data of response) {
        // assign data. instead of response.
        this.clientDropdownList.push({ '_id': data._id, 'name': data.name });

        // or this seeing as the field names are identical
        // this.clientDropdownList.push(data); 
        // you might even make a direct assignment but I am not sure if you are building the array from multiple sources
      }
      console.log(this.dropdownList);
    }, error => console.log("error :", error)
)