Question

我问了一个问题：Angular controlling a list of objects visibility on the same view，它回答了，但又提出了另一个问题。

如果我有一个子组件，如何知道发生什么变化。这是一些示例代码的链接：

https://stackblitz.com/edit/angular-e72hx9?file=src%2Fapp%2Fanswers%2Fanswers.component.ts

我尝试在 AnswerComponent 上使用 OnChanges 。我希望当我更改对象数组中的属性时，会触发 OnChanges ，然后更新我的列表，但不会。我认为这是一件容易的事，但是我不确定该怎么做。

有人可以帮忙吗？

Answer 1

您可能可以使用@Output和一个问题集。

在app.component模板中

<app-questions [questions]="questions" (setActive)="setActive($event)"></app-questions>
<app-answers [questions]="questions"></app-answers>

在app.component类中

setActive(item) {
  this.questions.map(question => {
    if(question.text === item.text) {
      question.active = !question.active;
    }
 });

}

答案部分

export class AnswersComponent {
  @Input() questions: Question[]
  constructor() { }
}

答案模板

 <h2>Answers</h2>
 <div *ngIf="questions">
   <div *ngFor="let question of questions">
      {{ question.active }} <!-- check how this will change true/false -->
     <ul>
       <li *ngFor="let answer of question.answers">{{ answer.text }}</li>
     </ul>

问题部分

export class QuestionsComponent {
 @Input() questions: Question[]
 @Output() setActive = new EventEmitter();
}

问题模板

<h1>Questions</h1>
<ul>
  <li *ngFor="let question of questions"><button (click)="setActive.emit(question)">{{ question.text }}</button> (active: {{ question.active }})</li>
</ul>

希望会有所帮助！

https://stackblitz.com/edit/angular-mq48s2

角度检测子组件的变化

1 个答案: