javascript - 在家庭组件Angular中隐藏组件的一部分

Question

这是我在主页中调用的手风琴组件的 ts 文件。但是，我想使用参数 showOnHome 仅显示布尔值为 true 的参数。我怎样才能做到这一点？

 @Component({
  selector: "app-faq",
  templateUrl: "./faq.component.html",
  styleUrls: ["./faq.component.css"],
})
export class FaqComponent implements OnInit {
 
  data = [
    {
      id: 1,
      question: "question1",
      answer: [
        "answer here",
      ],
      bullet: false,
      showOnHome: true,
    },
    {
      id: 2,
      question: "question2",
      answer: [
        "answer2",
      ],
      bullet: false,
      showOnHome: false,
    },]```


Called On Home Page as:
``` <app-faq></app-faq> ```

Answer 1

您可以通过执行以下操作在显示它们之前过滤项目列表：

const filteredData = data.filter(d => d.showOnHome);

Answer 2

您可以为您的组件创建一个名为 showHome 的参数并在内部为他过滤。

export class FaqComponent {
  @Input() showHome: boolean = false;
  filteredData;

  data = [
    {
      id: 1,
      question: "question1",
      answer: ["answer here"],
      bullet: false,
      showOnHome: true
    },
    {
      id: 2,
      question: "question2",
      answer: ["answer2"],
      bullet: false,
      showOnHome: false
    }
  ];

  ngOnInit() {
    console.log(this.showHome);
    if (this.showHome) {
      this.filteredData = this.data.filter((question) => question.showOnHome);
    } else {
      this.filteredData = this.data;
    }
  }
}

在主页上调用为：

<app-faq [showHome]="true"></app-faq> 

---

编辑：创建一个简单的例子这是如何工作的。 https://codesandbox.io/s/focused-nash-dlgsl?file=/src/app/app.component.html