单击事件发生在所有 div 上，而不是一次发生一个 - Angular5

Question

我对使用 Angular 非常陌生，并且遇到了一个问题！我在 Angular 5 中制作的常见问题解答页面上创建了一个点击事件。我遇到的问题是，当我单击一个常见问题解答时，它们都会打开，而不仅仅是目标问题。

这是我的ts：

public show_content = true;
  showContent () {
    this.show_content = !this.show_content;
  }

还有我的html：

<h4 class="accordion-toggle" (click)="showContent()">When is the app ready for download?</h4>
      <hr>
            <div class="accordion-content" *ngIf="!show_content">
                <p>
                    Cras malesuada ultrices augue molestie risus.
                </p>
            </div>
      <h4 class="accordion-toggle" (click)="showContent()">When is the app ready for download?</h4>
      <hr>
            <div class="accordion-content" *ngIf="!show_content">
                <p>
                    Cras malesuada ultrices augue molestie risus.
                </p>
            </div>

我知道我在两者上都使用了相同的 *ngIf，这就是发生这种情况的原因。我要问的问题是：有没有办法在不为每个常见问题解答创建多个变量的情况下做到这一点？我知道创建一个像这样的新函数：

showContent2 () {
    this.show_content2 = !this.show_content2;

  }

然后在我的 html 中有这个：

  <h4 class="accordion-toggle" (click)="showContent2()">When is the app ready for download?</h4>
      <hr>
            <div class="accordion-content" *ngIf="!show_content2">

这确实可以解决问题，但是我想知道是否有更好的方法可以做到这一点，因为这似乎很冗长。

Answer 1

一种方法是，您可以首先将每个常见问题解答重构为一个常见问题解答组件。这样你就可以隔离每个人了

在 /src/app/my-faq/my-faq.component.ts

import { Component, Input } from '@angular/core';

@Component({
  selector: 'my-faq',
  templateUrl: './my-faq.component.html',
  styleUrls: ['./my-faq.component.scss']
})
export class MyFaqComponent {
  @Input() title: string;
  @Input() content: string;
  show_content = false;

  constructor() {}

  showContent() {
    this.show_content = !this.show_content;
  }
}

在/src/app/my-faq/my-faq.component.html：

<h4 class="accordion-toggle" (click)="showContent()">{{ title }}</h4> 
<hr>
<div class="accordion-content" *ngIf="!show_content">
  <p>{{ content }}</p>
</div>

在 /src/app/my-faq/my-faq.component.scss

.accordion-toggle {
  // your css here
}
.accordion-content {
  // your css here
}

在 /src/app/app.module.ts 中添加：

...
import { MyFaqComponent } from './my-faq/my-faq.component.ts'
...

@NgModule({
  declarations: [
    ...,
    MyFaqComponent
  ]
...

在您的应用程序中声明组件后，在您的 html 中，现在您可以这样做：

<my-faq [title]="'When is the app ready for download?" [content]="'Cras malesuada ultrices augue molestie risus.'"></my-faq>
<my-faq [title]="'When is the app ready for download?" [content]="'Cras malesuada ultrices augue molestie risus.'"></my-faq>