изменение в массиве дочерних компонентов при нажатии кнопки родительского компонента - PullRequest
Новая
       31

изменение в массиве дочерних компонентов при нажатии кнопки родительского компонента

0 голосов
/ 01 июля 2019

У меня есть эти данные 

   let data =   [
            {
                "number": 1,
                "answer": "FIRE SAFETY: Ensure Fire Extinguishers are full. Check daily by looking at the needle in the gauge.",

            },
            {
                "number": 2,
                "answer": "SECURITY: CP collects the keys from designated holder behind the Till before going outside.",

            },
            {
                "number": 3,
                "answer": "VERIFICATION: Recheck the ullage reading with the Driver just prior to going outside.",

            }
        ]

и добавлено свойство disable вручную, чтобы отключить неправильный asnwer 

 this.data.map(function (answer){
  answer['disable'] = false;
});

То, что передается от родителя к потомку, это мой родительский компонент 

<child [answers]=data (clicked)="onClicked($event)"></child>
<button (clicked)="submit()">submit</button>

Это мой родительский компонент: 

onClicked(answer: InstructionAnswer) {
  this.selectedAnswer = answer;
}

submit(){
   this.data.find(a => a.number == this.selectedAnswer.number).disable = true;
}

При нажатии дочернего компонента я получаю выбранный ответ в родительском компоненте, используя EventEmitter

Это мой дочерний компонент: 

<mat-list id="instruction-list">
<mat-list-item matRipple  class="list-item-instruction pointer" *ngFor="let answer of answers;let i=index;"
  (click)="setInstruction(answer,i)" [ngClass]="{'list-item-selected': (i==selectedInstruction && !answer.disabled),'list-item-instruction--disabled':(answer.disabled) }">
  <div>
    {{answer.answer}} 
  </div>
</mat-list-item>


setInstruction(answer, i) {
this.selectedAsnswer = answer;
this.selectedInstruction = i;
this.instruction = answer.answer;
this.clicked.emit(answer);

}

ПРОБЛЕМА

когда пользователь выбирает ответ от дочернего компонента, я получаю данные в родительском компоненте и наНажав кнопку «Отправить» родительского компонента, я узнаю, какой ответ правильный, теперь я хочу отключить неправильный ответ в дочернем компоненте.Попробуйте так много способов, но это не работает, так что кто-то может сказать мне, как это сделать.

...