角度2のフォームにテキストを挿入/編集できません

Question

親コンポーネントTestListComponentと子コンポーネントTestComponentを作成しました。テストコンポーネントは、@Input（）で親コンポーネントからの入力を受け取ります。テストオブジェクトには質問のリストが含まれています。私はテストに新しい質問を挿入することができます。すでに作成されたテストを編集すると、以前作成したテストの質問を更新できません。

ここは私のコンポーネントです。

@Component({ 
    selector:'create-test', 
    template:'<test (emitTest)="saveTest($event)" [test]="test$ | async"></test>' 
}) 
export class CreateComponent implements OnInit{ 
    test$:Observable<Test>; 
    constructor(private store:Store<appR.State>){} 

    ngOnInit(){ 
     this.test$ = this.store.select(appR.getTest); 
    } 
    saveTest(test:Test){ 
     this.store.dispatch(new testA.SaveTestAction(test)); 
    } 
} 

そして、ここでは私の子コンポーネントは

@Component({ 
    selector: 'test', 
    templateUrl: './test.component.html', 
    changeDetection:ChangeDetectionStrategy.OnPush 
}) 
export class TestComponent implements OnInit { 
    @Input() test: Test; 
    @Output() emitTest = new EventEmitter(); 
    i = 0; 
    ngOnInit() { 
    if(!this.test){ 
     this.test = new Test(); 
     this.test.questions = [new Question()]; 
    } 
    } 
    prev =() => { 
    if (this.i > 0) { 
     this.i--; 
    } 
    } 
    next =() => { 
    if (this.validate(this.test.questions[this.i], this.i)) { 
     this.i++; 
    } else { 
     alert("Please fill all the required information"); 
    } 
    } 
    save =() => { 
    this.test.noq = this.test.questions.length; 
    this.emitTest.emit(this.test); 
    } 
    check(choice) { 
    if (!(this.test.questions[this.i].answer & choice)) { 
     this.test.questions[this.i].answer |= choice; 
    } else { 
     this.test.questions[this.i].answer &= ~choice; 
    } 
    } 
    hasAns(choice) { 
    return this.test.questions[this.i].answer & choice; 
    } 
    private validate = (question: Question, count: number): Boolean => { 
    if (question && question.qName && question.choiceA && question.choiceB 
    ) { 
     if (count + 1 < this.test.questions.length) { 
     return true; 
     } else { 
     this.test.questions.push(new Question()); 
     return true; 
     } 
    } 
    return false; 
    } 

} 

されており、ここに私のテンプレートです。

<div class="row" *ngIf="test"> 
    <form class="col-sm-12"> 
     <div class="form-group"> 
      <label for="testName">Test Name</label> 
      <input type="text" class="form-control" name="testName" [(ngModel)]="test.testName" placeholder="Test Name"/> 
     </div> 
     <div class="form-group"> 
      <label for="testDesc">Test Description</label> 
      <textarea class="form-control" rows="3" name="testDesc" [(ngModel)]="test.testDesc"></textarea> 
     </div> 
     <div class="form-horizontal question" *ngIf="test.questions" style="padding-left: 0px;padding-right: 0px;"> 
      <div class="form-group row"> 
       <label for="qName" class="col-sm-1 col-form-label">Que {{i+1}}.</label> 
       <div class="col-sm-11"> 
        <textarea class="form-control" name="qName" [(ngModel)]="test.questions[i].qName" rows="2"></textarea> 
       </div> 
      </div> 
      <div class="form-group row"> 
       <label for="choiceA" class="col-sm-1 col-form-label">A.</label> 
       <div class="col-sm-11"> 
        <div class=" input-group"> 
         <input type="text" class="form-control" name="choiceA" [(ngModel)]="test.questions[i].choiceA"/> 
         <div class="input-group-addon" title="Answere"> 
          <input [checked]="hasAns(1)" (click)="check(1)" type="checkbox"/> 
         </div> 
        </div> 
       </div> 
      </div> 
      <div class="form-group row"> 
       <label for="choiceB" class="col-sm-1 col-form-label">B.</label> 
       <div class="col-sm-11"> 
        <div class="input-group"> 
         <input type="text" class="form-control" name="choiceB" [(ngModel)]="test.questions[i].choiceB"/> 
         <div class="input-group-addon" title="Answere"> 
          <input [checked]="hasAns(2)" (click)="check(2)" type="checkbox"/> 
         </div> 
        </div> 
       </div> 
      </div> 
      <div class="form-group row"> 
       <label for="choiceC" class="col-sm-1 col-form-label">C.</label> 
       <div class="col-sm-11"> 
        <div class="input-group"> 
         <input type="text" class="form-control" name="choiceC" [(ngModel)]="test.questions[i].choiceC"/> 
         <div class="input-group-addon" title="Answere"> 
          <input [checked]="hasAns(4)" (click)="check(4)" type="checkbox"/> 
         </div> 
        </div> 
       </div> 
      </div> 
      <div class="form-group row"> 
       <label for="choiceD" class="col-sm-1 col-form-label">D.</label> 
       <div class="col-sm-11"> 
        <div class="input-group"> 
         <input type="text" class="form-control" name="choiceD" [(ngModel)]="test.questions[i].choiceD"/>      
         <div class="input-group-addon" title="Answere"> 
          <input [checked]="hasAns(8)" (click)="check(8)" type="checkbox"/> 
         </div> 
        </div> 
       </div> 
      </div> 
      <div class="form-group row"> 
       <label for="choiceE" class="col-sm-1 col-form-label">E.</label> 
       <div class="col-sm-11"> 
        <div class="input-group"> 
         <input type="text" class="form-control" name="choiceE" [(ngModel)]="test.questions[i].choiceE"/> 
         <div class="input-group-addon" title="Answere"> 
          <input [checked]="hasAns(16)" (click)="check(16)" type="checkbox"/> 
         </div>     
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="form-group text-center"> 
      <input type="button" class="btn btn-primary" (click)="prev()" value="Prev"/> 
      <input type="button" class="btn btn-primary" (click)="save()" value="Save"/> 
      <input type="button" class="btn btn-primary" (click)="next()" value="Next"/> 
     </div> 
    </form> 
</div> 
<div class="row justify-content-md-center" *ngIf="!test"> 
    <loader></loader> 
</div> 

私が編集するテストを選択すると、テスト中の情報は取得できませんが、新しい質問を挿入できます。 これについての助けてください。

Answer 1

@Input()にはngOnInitでアクセスしないでください。ngOnChangesにアクセスしてください。 ngOnInitは1回だけ実行され、@Input()変数が変更されるたびにngOnChangesが実行されます。詳細はこちら

チェック：フォームに記入する@Input()にアクセスするときについてAngular 2/4 @Input only moves intrinsics - not lists or objects

角度のドキュメント： https://angular.io/guide/reactive-forms#when-to-set-form-model-values-ngonchanges

[UPDATE]あなたのコードは、これに変更するとどうなりますか

：

export class TestComponent implements OnInit, OnChanges { 
    @Input() test: Test; 
    @Output() emitTest = new EventEmitter(); 
    i = 0; 

    ngOnChanges(changes:any) { 
    if(changes.test && changes.test.currentValue){ 
     this.test.questions = [new Question()]; 
    } 
    }