Question

我想在Component中使用两种方式绑定。但它不起作用。我不明白为什么？

关于详细信息：

DropdownComponent单击事件是更改选定的变量。但我想同步更改AppComponent变量选择。

这是我的stackblitz。

我希望像这样example

Answer 1

要在属性foo上使用two way binding，您需要一个名为fooChanged的伴随属性

当元素具有名为x的可设置属性和名为xChange的相应事件时，[[x）]语法很容易演示。这是一个适合该模式的SizerComponent。它具有一个size值属性和一个伴随的sizeChange事件

因此，以我们的示例为例，您需要将下拉组件代码简化为：

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

@Component({
  selector: 'app-dropdown',
  templateUrl: './dropdown.component.html',
  styleUrls: ['./dropdown.component.css']
})
export class DropdownComponent implements OnInit {
  isOpen = false;
  @Input() selected ;
  @Input() data;
  @Output() selectedChange = new EventEmitter<number>();

  constructor() { }

  ngOnInit() {

  }
  selectItem(item) {
    this.isOpen = false;
    this.selected = item;
    this.selectedChange.emit(this.selected);
  }


}

并像这样使用它：

<app-dropdown [(selected)]="select" [data]="['AAA', 'BBB', 'CCC']"></app-dropdown>

这是一个有效的示例https://stackblitz.com/edit/angular-gkxedg

Answer 2

my-app组件需要开始收听itemChange EventEmiiter。

将app.component.html模板更改为

<h1 >AppComponent selected: {{ select }}</h1>
<p>
    <app-dropdown (itemChange)="select=$event" [data]="['AAA', 'BBB', 'CCC']"></app-dropdown>
</p>

它应该可以工作。

Answer 3

这样更改您的应用程序组件

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  select = 'i want change select';

  onSelect(text: string) {
    this.select = text;
  }
}

app.component.html

<h1 >AppComponent selected: {{ select }}</h1>
<p>
  <app-dropdown (itemChange)="onSelect($event)" [data]="['AAA', 'BBB', 'CCC']"></app-dropdown>
</p>

我想在下拉菜单中进行双向绑定

3 个答案: