javascript - 如何使用 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;
        })
      })

    }
  }

演示:DEMO

Answer 1

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

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

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