首页 > 解决方案 > 在 Angular 中搜索嵌套对象

问题描述

我在 Angular 应用程序中搜索嵌套数组时遇到问题。我必须访问 package.name。请帮忙谢谢enfoiewfhfofhfowfoewhfowfoewhfwefwfhowefweofhew8ofwofhewofw8eofhwf

JSON

[{
    "id": 1,
    "name": "Yeah",
    "package_id": 1,
    "price": 100,
    "package": {
        "id": 1,
        "name": "Yeah"
    }
}]

TS

search(event) {
    const val = event.target.value.toLowerCase();

    if (!val) {
        this.users = this.tempUsers;
    }

    const temp = this.tempUsers.filter((row) => {
        return Object.keys(row).some((property) => {
            return row[property] === null ? null : row[property].toString().toLowerCase().indexOf(val) !== -1;
        });
    });

    this.users = temp;
}

TS

 getAllUsers() {
    this.usersService.getAll()
      .subscribe(
        (data: any) => {
          console.log(data);
          this.users = data.Users;
          this.tempUsers= [...this.users];
        },
        error => {
          console.log(error);
        });
  }

标签: javascriptarraysangularangular-reactive-formsangular-forms

解决方案


根据您的数据,您可以使用以下过滤器;

const filteredData = data.filter((item) => item.price.toString() === val || item.package_id.toString() === val || item.package.name.toString().toLowerCase().indexOf(val) !== -1 );

// 用代码更新

search(event) {
    const val = event.target.value.toLowerCase();
   const filteredData = this.users.filter((item) => item.price.toString() === val || 
   item.package_id.toString() === val || 
    item.package.name.toString().toLowerCase().indexOf(val) !== -1 );

    this.users = filteredData ;
}

推荐阅读