如何使用 angular2 primeng 使子元素显示在搜索中并在单击“全部”时显示所有元素

Question

我有一个搜索输入框和字母，全部。这些东西要根据输入进行搜索。现在，我正在搜索字母表m，它给了我子列表，但是当我单击ALL时，元素没有重置。场景：最初单击"p-test17"左侧的按钮，因此我们能够看到子元素的列表。现在，点击 M ，或通过提供输入键搜索"m"，它显示带有 m 的子元素。现在点击 ALL ，它必须重置所有元素，但相反，它没有像初始步骤中所示的那样显示"p-test17"中的所有子元素。

请帮忙。

TS：

searchFacility(search) {
    this.sLetter = search;
    let memberFacilities = true;
    if (search) {
      this.dtFacilities.expandedRows = [];
      setTimeout(() => {
        this.dtFacilities.expandedRows = this.dtFacilities.value;
        console.log(this.dtFacilities.value,"this.dtFacilities.value")
        this.dtFacilities.value.forEach(m => {
          m.memberFacilities.forEach(f => {
            let mySearch = search.toLowerCase();
            let facilityName = f.facilityName.toLowerCase();
            if (facilityName && facilityName.includes(mySearch)) {
              f.isShowMember = false;
              memberFacilities = false;
            } else {
              f.isShowMember = true;
              memberFacilities = true;
            }
          })
        })
        if (memberFacilities) {
          this.dtFacilities.expandedRows = [];
        } 
      }, 100);
    }
    if (search == "") {
      this.dtFacilities.expandedRows = [];
      this.dtFacilities.expandedRows = this.medicalOfficesList;
      this.medicalOfficesList.forEach(m => {
        m.memberFacilities.map(f => {
          f.isShowMember = false;
        })
      }) 
    }
    else {
      this.dtFacilities.expandedRows = [];
      this.dtFacilities.value.forEach(m => {
        m.memberFacilities.map(f => {
          f.isShowMember = false;
        })
      })
    }
  }

演示

：演示

Answer 1

在 app.pipe.ts 第 22 行的mainArr.forEach(element => {之前添加：

mainArr = mainArr.map(e => {
  return {...e};
});

问题是，当您通过searchMedicalOffices管道运行medicalOfficesList时，您将mainArr上的memberFacilities(在本例中为medicalOfficesList(替换为新的过滤数组。通过在上面的第 22 行添加新代码，您将在替换每个对象memberFacilities属性之前，在 mainArr 中创建每个对象的新(浅(副本。这样，原始medicalOfficesList将保持不变。