Question

我正在Angular v6中使用此多选库https://www.npmjs.com/package/ng-multiselect-dropdown。

我正在尝试在multiSelect中显示我的列表，但是下拉列表显示的是“ 无可用数据”

如果我按照以下方式对我的回答进行硬编码，则该列表填充良好。我不明白怎么了。 为什么我的回复不起作用，但是如果我对其进行硬编码，则可以正常工作吗？

this.members = [
  {
    "item_id": "user1@gmail.com",
    "item_text": " User 1"
  },
  {
    "item_id": "user2@gmail.com",
    "item_text": " User 2"
  }]

HTML

<ng-multiselect-dropdown [placeholder]="'Select Member Names'" [data]="members"
                [(ngModel)]="selectedMembers" [settings]="dropdownSettings" (onSelect)="onItemSelect($event)"
                (onDeSelect)="onItemDeSelect($event)">
</ng-multiselect-dropdown>

TS

export class IndividualDashboardComponent implements OnInit {


  selectedMembers: Array<any> = [];
  getIndividualMemberResponse: any;
  statusCode: number;
  members = [];
  dropdownSettings = {};
  constructor(private route: ActivatedRoute, private toastMessageService: NotificationService, private http: HttpService) { }


  ngOnInit(): void {
    this.getMembers();

    this.dropdownSettings = {
      singleSelection: false,
      idField: 'item_id',
      textField: 'item_text',
      selectAllText: 'Select All',
      unSelectAllText: 'UnSelect All',
      itemsShowLimit: 4,
      allowSearchFilter: true
    };

  }
  getMembers() {
    let teamName: String = "All";
    let urlString: any = environment.ALL_TEAM_MEMBERS + teamName;
    this.http.getRequest(urlString, null, null)
      .subscribe((data) => {
        (<Array<String>>data).forEach(member => {
          this.members.push({ item_id: member, item_text: member });
        });
        console.log(JSON.stringify(this.members))
      },
        (error: Response) => {
          this.getIndividualMemberResponse = error;
          this.statusCode = this.getIndividualMemberResponse.status;
          this.toastMessageService.errorMessageToast(this.statusCode);
        });
  }


  onItemSelect(item: any) {
    if (this.selectedMembers.length === 0) {
      $('#submitButton').prop('disabled', true);
    } else {
      $('#submitButton').prop('disabled', false);
    }
  }
  onItemDeSelect(item: any) {
    if (this.selectedMembers.length === 0) {
      $('#submitButton').prop('disabled', true);
    } else {
      $('#submitButton').prop('disabled', false);
    }
  }
}

已编辑

按如下方式更改了我的方法，但也没有起作用。

  getMembers() {
    let urlString: any = environment.ALL_TEAM_MEMBERS + 'All';
    this.http.getRequest(urlString, null, null)
      .subscribe((data) => {
        this.members = 
         (<Array<String>>data).map(member => ({ item_id: member, item_text: member }));
        console.log(JSON.stringify(this.members))
      });
  }

Answer 1

更新：

主要问题是，选择组件期望{item_id:number, item_text:string}[]属性的类型为data，但是您在订阅回调中将data映射为错误的方式

请注意，您正在将对象推入members数组，其属性item_id和item_text是在订阅回调中迭代的data数组的元素。

代替：

this.members.push({ item_id: member, item_text: member });

您应该拥有

this.members.push({ item_id: member.item_id, item_text: member.item_text });

通过对实例成员的类型更明确，您可以轻松避免此类问题。例如：

interface SelectItem {
  item_id: number;
  item_text: string;
}

export class IndividualDashboardComponent implements OnInit {
   ...
   members: SelectItem[] = [];
   ...

   getMembers(){
     ...
     this.http.getRequest(urlString, null, null)
      .subscribe((data: SelectItem[]) => this.members = data);
     ...
   }
}

原始：

您的问题很可能与您对members数组进行变异的事实有关。选择组件has onPush change detection，可以确保我的猜测。

尝试使用新值对members数组进行设置而不是对其进行突变。您可以通过重构代码以在订阅回调中使用map而不是forEach来做到这一点，如下所示：

this.members = data

无法在多选下拉菜单Angular 6中显示数据

1 个答案: