当变量根据使用Angular的更改事件更改时，将变量从子组件传递到父组件-Java 学习之路

我试图从具有与之关联的（更改）事件的选择输入传递输入值，从子组件到父元素 . 希望每次更新子组件中的变量时都会更新变量 .

我的问题与Question不同，因为我对变更事件进行了变量更改，并且每次变量更改时都需要更新 .

我能够使用ViewChild和AfterViewInit解决这个问题，但我在控制台中收到一条错误：ExpressionChangedAfterItHasBeenCheckedError：表达式在检查后发生了变化 . 上一个值：'undefined' . 当前 Value ：'测试' .

想象一下，必须有一个简单的方法来做到这一点 . 请记住，我仍然是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')
  }

非常感谢任何帮助，谢谢！

2 回答

在代码中执行以下步骤：

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

回复于 2024-05-03T05:43:03+08:00

试试这个：

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

This link将揭示问题的确切原因 .

回复于 2024-05-03T05:43:03+08:00

当变量根据使用Angular的更改事件更改时，将变量从子组件传递到父组件

2 回答

相关问题