下拉（选择选项）没有获取数据 - Angular 11答案

【问题标题】：Dropdown (select option) not getting data - Angular 11下拉（选择选项）没有获取数据 - Angular 11
【发布时间】：2022-08-24 10:57:25
【问题描述】：

这是我的model.ts

export interface IUserEducationalBackground {
    id: number;
    user_id: number;
    studies_type: string;
    year: number;
    course: string;
}

我有一个这样的下拉菜单。

<div class=\"col-5\">
  <ng-select bindLabel=\"name\" bindValue=\"name\" [items]=\"studiesType\" [(ngModel)]=\"studiesType.name\"
  (Change)=\"searchStudies(studiesType.name)\">
  </ng-select>
</div>

每当此值更改时，我都想更改 html 表数据

<tr *ngFor=\"let item of educationalDetails; let i = index\">
  <td>
    {{ item.year }}
  </td>
  <td>
    {{ item.course }}
  </td>
  <td>
    {{ item.awards }}
  </td>
</tr>

这是我想与 api 数据进行比较的数组

studiesType: any = [
    { name: \'Basic\' },
    { name: \'Secondary\' },
    { name: \'Undergraduate\' },
    { name: \'Graduate\' },
  ];

更新
这是我寻找用户研究的方法

public searchStudies(name: any) {
    let obj = this.educationalData.filter(m => m.Name == name);
    console.log(this.educationalData)
    this.educationalDetails = obj;
    console.log(this.educationalDetails)
  }

这是我的 api 调用。

private getUserEducationalBackground(user): void {
    this.apiService.getUserProfile(\'users/educational-background\', user.id)
      .subscribe(
        data => {
          this.educationalData = data;
        });
  }

当我使用 console.log 时，它给出了 console.log(this.educationalData) 的值，但之后 console.log(this.educationalDetails) 给出了空白数组。

打字错误？ (change) 而不是 (Change)。
哦，该死的。是的，你是对的。现在我得到了 console.log 但表没有改变它的值。
您是否取消注释 searchStudies 函数中的代码？在那之后，它起作用了吗？
是的，然后我 console.log(this.educationalDetails) 它给了我空白数组。
然后，当您从 educationalData 过滤数据时，似乎出现了问题。 educationalData 的值是多少？请分享问题中的数据。谢谢。

标签： angular angular11 angular-ngselect

【解决方案1】：

问题一：考虑使用另一个变量来存储选定的studiesType。

HTML

<ng-select bindLabel="name" bindValue="name" [items]="studiesType" 
    [(ngModel)]="selectedStudiesType"
    (change)="searchStudies(selectedStudiesType)">
</ng-select>

selectedStudiesType: string;

问题 2：过滤逻辑中的错误很少。

缺少 Name 属性。相反，请使用studies_type。

比较两个字符串，忽略大小写敏感。

public searchStudies(name: any) {
  let obj = this.educationalData.filter(
    (m) => m.studies_type == name.toLowerCase()
  );

  this.educationalDetails = obj;
}

Sample StackBlitz Demo

【讨论】：

并感谢 Post Owner 在讨论中进行调试。