0

Angular 2 Model Driven Form の Drop Down List で説明されている問題と同様の問題があります(ただし、選択ボックスへのモデル バインディングははるかに単純です)。

テンプレートは非常にシンプルで、基本的に「Dear x」のリストで、x はサービスによって提供されます。

セレクトボックスのスクリーンショット

<form novalidate [formGroup]="myForm">
  <div class="form-group">
    <label for="salutation">Dear ...</label>
    <select id="salutation"
            class="form-control"
            formControlName="salutation">
      <option value="">Please select how to address the customer</option>
      <option *ngFor="let sal of salutations"
              [value]="sal">{{sal}}
      </option>
    </select>
  </div>
</form>

コンポーネントでは、この選択ボックスのデータを取得するサービスにサブスクライブします (console.log実際にデータが到着することを示しています)。

  ngOnInit() {
    this.createFormControls();
    this.createForm();
    this.proposalStateService.emitProposal.subscribe(
      data => {
        console.log('subscribe fired: ');
        console.log(data);
        this.salutations = [
          'Mr & Mrs ' + data.last_name,
          'Mrs ' + data.last_name,
          'Ms ' + data.last_name,
          'Mr ' + data.last_name,
          data.first_name
        ];
      }
    );
  }

  createFormControls() {
    this.salutation = new FormControl(this.salutations, Validators.required);
  }

  createForm() {
    this.myForm = new FormGroup({
      salutation: this.salutation
    });
  }

サービスからの値でフォームを更新するためにこれらの方法を試しましたが、どれも機能していないようです:

  1. グループをリセットする

    this.myForm = this.formBuilder.group({
  salutation: [this.salutations]
});

  2. フォームの値にパッチを当てる

    this.myForm.patchValue(this.salutation, this.salutations);

  3. コントロールに値を設定する

    this.salutation.setValue(this.salutations);

  4. フォームから値を設定します

    this.myForm.controls['salutation'].setValue(this.salutations);

明らかに何かが欠けています...しかし、何ですか？

元の質問に編集

コンソールにデータの到着が表示されることがありましたが、コードをクリーンアップしてさらにテストした後、console.logこのコンポーネントがロードされたときにイベントが表示されなくなりました。これはタイミングの問題に違いないと思います.必要なデータを発行するサービスがすでに起動した後に、コンポーネントがロードされている可能性があります.

このコンポーネントは、次のように、navigate イベントで親コンポーネントによってロードされます。

/parent.component.ts

  ngOnInit() {
    this.newProposal = new Proposal;
    this.newProposal.step = 1;
    this.proposalStateService.emitProposal.subscribe(
      data => {
        this.router.navigate(['pages/proposals/new/step' + data.step]);
      }
    );

この emitProposal は、ユーザーがデータをドロップすることによってこのコンポーネントで起動され、このメソッドが呼び出されます。

  private initProposal(customer, step) {
    this.newProposal.first_name = customer.first_name;
    this.newProposal.last_name = customer.last_name;
    this.newProposal.customer_id = customer.id;
    this.newProposal.email = customer.email;
    this.newProposal.mobile = customer.mobile;
    this.newProposal.status = 'Draft';
    this.newProposal.step = step;
    this.proposalStateService.pushProposal(this.newProposal);
  }

この「pushProposal」は、子コンポーネントがロードされる前に起動されるようですが、それが問題になる可能性はありますか?

（今、ログが以前に受信したデータをどのように示していたのか疑問に思っています、はは、この質問を書いている間に一体何を変更したのですか!?)

4

1 に答える 1