无法以 Angular 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

您不应该在ngOnInit 中访问您的@Input()，而是在ngOnChanges 中。 ngOnInit 只运行一次，ngOnChanges 在每次更改 @Input() 变量时运行。

点击此处了解更多详情：Angular 2/4 @Input only moves intrinsics - not lists or objects

关于何时访问 @Input() 以填写表格的 Angular 文档： 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()];
    }
  }