當變量使用Angular基於更改事件更改時，將變量從子組件傳遞到父組件

Question

我試圖從選擇輸入傳遞一個輸入值，該輸入具有一個與子組件到父元素相關聯的（更改）事件。 希望每次子組件中的變量更新時，變量都會更新。

我的問題與Question不同，因為我的變量在更改事件中發生更改，因此每次變量更改時都需要更新。

我可以使用ViewChild和AfterViewInit弄清楚這一點，但在控制台中看到一條錯誤消息：ExpressionChangedAfterItHasBeenCheckedError：表達式在檢查后已更改。 上一個值：“未定義”。 當前值：“正在測試”。

認為必須有一種簡單的方法來執行此操作。 請記住，我對Angular還是陌生的。

子組件模板：

<form>
  <div class="form-group">
    <label for="Master-Products">Select Master Product</label>
    <select [(ngModel)]="selectedValue" name="pow" (change)="pow = $event.target.value; onKeyUp()" class="form-control" id="Master-Products">
      <option *ngFor="let pow of powers" [value]="pow">{{pow}}</option>
    </select>
  </div>
</form>

子組件：

export class MasterInputComponent {
  powers: any[] = [ 'power1', 'power2', 'power3' ];
  submitted = false;
  pow:string = 'Testing';
  selectedValue = null;
  constructor() { }

  onKeyUp(value): void{
    console.log('Value: ',this.pow);
  }

父組件模板：

<div role="tabpanel" class="tab-pane" id="accessories">
  <h1>ACCESSORIES</h1>
  <h4>Testing: {{power}}</h4>
  <master-input (change)="recieveMessage($event.target.value)"></master-input>
  <accessories></accessories>

父組件：

export class AppComponent implements AfterViewInit{
  @ViewChild(MasterInputComponent) child;
  title = 'Having FUN with Angular';
  posts: any[];
  power:string;

  constructor(private service:ProductsService){}
  ngAfterViewInit(){
    this.power = this.child.pow;
  }

  recieveMessage(value){
    console.log('Event: ',value);
    this.power = value;
    console.log('Favorite has changed')
  }

任何幫助將不勝感激，謝謝！

Answer 1

在代碼中執行以下步驟：

（ngModelChange）=“ onKeyUp（$ event）”而不是（change）=“ pow = $ event.target.value; onKeyUp（）”

在您的孩子ts文件中

import { Component, Output, EventEmitter } from '@angular/core';

@Output() sendMessage = new EventEmitter();

onKeyUp(e) {
    this.sendMessage.next(e);
}

父HTML

<master-input (sendMessage)="recieveMessage($event)"></master-input>
  <accessories></accessories>

以下代碼將添加您的父ts

recieveMessage(msg) {
    console.log('msg', msg)
}

Answer 2

嘗試這個：

constructor(private service:ProductsService, private cdr: ChangeDetectorRef){}
ngAfterViewInit(){
    this.power = this.child.pow;
    this.cdr.detectChanges();
}

該鏈接將闡明問題的確切原因。