無法以角度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只運行一次，ngOnChanges對@Input()變量的每次更改均運行。

點擊這裏瞭解更多詳情：Angular 2/4 @Input only moves intrinsics - not lists or objects

何時訪問@Input()角文檔填寫表格： https://angular.io/guide/reactive-forms#when-to-set-form-model-values-ngonchanges

[更新]

如果你改變你的代碼，這會發生什麼：

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()]; 
    } 
    }