Angular 2方式绑定组件答案

【问题标题】：Angular 2 way Binding for a componentAngular 2方式绑定组件
【发布时间】：2020-11-17 13:34:19
【问题描述】：

我正在用 Angular 创建一个简单的待办事项应用程序。我只是想知道在使用 ngFor 指令时有没有办法以 2 方式绑定

有没有办法获取数据“每个组件”并从“应用程序组件”中存在的列表中删除

我正在使用 [(size)]="x" 进行 2 路绑定

app.component.html

<input type="button" value="add"  (click)="foo()">
<hr>
<app-each *ngFor="let x of ltodod" [(size)]="x"></app-each>

app.component.ts


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  @ViewChild('todo') val:ElementRef;
  title = 'todo';
  t=""
  ltodod=[]
  foo()
  {
      this.ltodod.push(this.val.nativeElement.value);
      console.log(this.ltodod);
  }
  foo1(e)
  {
    console.log(e);
  }
}

每个.component.html

  <h1>task:{{size}}</h1>
  <button (click)="foo()" >remove</button>
</div>

每个.component.ts

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


@Component({
  selector: 'app-each',
  templateUrl: './each.component.html',
  styleUrls: ['./each.component.css']
})
export   class EachComponent implements OnInit {
  @Output() sizeChange=new EventEmitter();
@Input() size;
  constructor() { }

  ngOnInit(): void {
  }
  foo()
  {
    this.sizeChange.emit("fsdfd");
    console.log("emited")
  }

}

【问题讨论】：

一篇关于 2 路绑定的非常好的博文：blog.thoughtram.io/angular/2016/10/13/…
这里有什么问题？有什么不符合您的预期吗？

标签： angular typescript angular-directive ngfor

【解决方案1】：

您不能将 $event 分配给模板变量，因为它是只读且仅为模板级别范围创建。

在下面的语句（您的场景）中，您已经使用 let 关键字创建了 变量 x，它仅在模板中仅在 *ngFor 范围内可用。但是<app-each> 中不存在这种 x 类型的变量。因此它不会起作用。

ngFor="let x of ltodod" [(size)]="x" > //行不通

【讨论】：