1

この質問と同様の問題がありますが、2つの回答のどちらもうまくいかないため、質問が古くなっているようです。

子コンポーネントは、入力として渡された複雑なオブジェクトからデータをレンダリングするだけですProposal(ユーザー コントロールはまったくないため、イベントを発生させたり、何かを渡したりする必要はありません)。

@Component({
  selector: 'fb-proposal-document',
  templateUrl: './proposal-document.component.html',
  styleUrls: ['./proposal-document.component.css']
})
export class ProposalDocumentComponent implements OnInit, OnDestroy {
  @Input() proposal: Proposal;

  constructor()
}

テンプレートの関連部分は次のとおりです。配列を反復し、プロパティをチェックして、次を使用して異なるテキストを表示します*ngIf。

<li class="section" *ngFor="let qp of proposal?.quoted_products">
  <li class="section" *ngFor="let room of qp?.rooms">
    ...
    <div class="row">
      <div class="col-md-12">
        Supply
        <span *ngIf="room.is_fitted">
          and install
        </span>
        <span *ngIf="!room.is_fitted">
          only
        </span>                    
      </div>
    </div>
    ...                
  </li>
</li>

親で、ユーザーはチェックボックスをクリックして「is_fitted」を true または false に変更できます。親はドメイン ドライブ フォームを使用しています。親のngOnInitには、次のコードがあります。

this.myForm.controls['isFitted'].valueChanges.subscribe(
  value => {
    this.proposal.is_fitted = value;
    let qp = this.proposal.quoted_products[this.qpCurrentIndex];
      qp.rooms.forEach(function(room) {
        room.is_fitted = value;
    });
  }
);

プロパティを正しく更新します。私はそれを見ることができますconsole.log。*ngIf問題は、埋め込まれたroom.is_fitted値が変更されたときに、子に再起動/再処理させるにはどうすればよいですか?

ViewChild を使用してこのアイデアを実装しようとしたので、ngOnInit の上記のコードは次のようになります。

this.myForm.controls['isFitted'].valueChanges.subscribe(
  value => {
    this.proposal.is_fitted = value;
    let qp = this.proposal.quoted_products[this.qpCurrentIndex];
      qp.rooms.forEach(function(room) {
        room.is_fitted = value;
    });
    this.proposalDocument.notifyChange(this.proposal);
  }
);

しかし、それもうまくいきません。子のnotifyChangeが正常に呼び出されました:

  notifyChange(proposal: Proposal) {
    console.log('I changed');
    this.proposal = proposal;
  }

ビューは更新されません -*ngIfロジックは再処理されません。

4

2 に答える 2

1

すべてのコードを取り出し、最初から書き直したところ、最初の試みが機能するようになりました。

this.myForm.controls['isFitted'].valueChanges.subscribe(
  value => {
    this.proposal.is_fitted = value;
    let qp = this.proposal.quoted_products[this.qpCurrentIndex];
      qp.rooms.forEach(function(room) {
        room.is_fitted = value;
    });
  }
);

私は子供に通知する必要はまったくありません。ビューは自動的に更新されます。

私が読んだすべてのことから、複雑なオブジェクトは深いプロパティを更新しないと確信していました-オブジェクト自体への参照を変更した場合のみ。しかし、ここでは深いプロパティを変更しており、ngOnChanges を呼び出して子に通知していませんが、機能しています。図に行きます。

于 2017-01-14T09:46:26.303 に答える