este es el archivo ts de un componente de acordeón que he llamado en la página de inicio. Sin embargo, quiero usar el parámetro showOnHome para mostrar solo los que tienen un valor booleano verdadero. ¿Cómo puedo hacer eso?
@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> ```Puede filtrar la lista de elementos antes de mostrarlos haciendo algo como:
const filteredData = data.filter(d => d.showOnHome);Puede crear un parámetro para su componente llamado showHome y filtrarlo internamente.
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; } } }Llamado en la página de inicio como:
<app-faq [showHome]="true"></app-faq>EDITAR: Cree un ejemplo simple de cómo funciona esto. https://codesandbox.io/s/focused-nash-dlgsl?file=/src/app/app.component.html