Question

我的app.component.ts

import { Component, Input, OnInit, OnChanges, SimpleChanges} from '@angular/core';
import {Counter } from './counter'
@Component({
  selector: 'my-app',
  template: `
    <custom-counter [(counter)]="counterArray" (counterChange)="myValueChange($event);"></custom-counter>
<p><code>counterValue = {{counterValue}}</code></p>
<hr>
  `
})
export class AppComponent implements OnChanges{
    counterArray:Counter[]
    counterValue = 5;
    constructor(){
      this.counterArray=[{id:0,value:0},{id:1,value:1}]
    }
    myValueChange(event:Counter[]) {
       console.log(event);
    }
 }

我的counter.ts

export class Counter {
  id: number;
  value: number;
}

和自定义计数器组件：

import { Component, Input, Output, EventEmitter } from '@angular/core';
import { Counter } from './counter';
@Component({
  selector: 'custom-counter',
  template: `
  First counter
    <button (click)="decrement()">-</button>
    <span>{{this.counter[1].value}}</span>
    <button (click)="increment()">+</button>
  `
})
export class CustomCounterComponent {
  @Input() counter : Counter[];
  @Output() counterChange = new EventEmitter();
  decrement() {
    this.counter[1].value--;
        this.counterChange.emit({
      value: this.counter
    })
  }

  increment() {
    this.counter[1].value++;
        this.counterChange.emit({
      value: this.counter
    })
  }
}

我的计划是，如果用户从子组件按下按钮，则会通知父级，并在控制台中打印一些内容。不幸的是，当用户按下按钮错误时抛出：

“./CustomCounterComponent类中的错误CustomCounterComponent - 内联模板：3：10导致：无法读取未定义的属性'value'”

我知道这个例外是相当紧张的，但是当我通过所有事情时，我无法找到为什么某些事情未定义。

如果我用emit注释掉行没有出现错误，但我没有父母的通知

Answer 1

在CustomCounterComponent类中，模板存在问题。

在模板中尝试以下操作：

func GetUsers(c *gin.Context) {

var users = db.Find(&models.Person{})
c.JSON(200, users)
}

？是一个安全操作符，当计数器[1]未定义时不会抛出异常

另请注意，模板

中的计数器不需要这样做

以下方法需要一个Array，而它接收一个对象。

template: `
 First counter
<button (click)="decrement()">-</button>
<span>{{counter[1]?.value}}</span>
<button (click)="increment()">+</button>
`

Answer 2

问题在于正确调用emit方法。

这样打电话：

this.counterChange.emit({
  value: this.counter
})

创建了一个新的对象，该对象已经被激活，并且有些混淆了对象绑定。（如果有人能更好地解释这一点，那么请你这样做。）

将呼叫改为此后：

this.counterChange.emit(this.counter)

当我发出strait输入对象时，一切都开始起作用了。

将事件从组件发送到父模块cousing异常

2 个答案: