Я хочу двустороннюю привязку в выпадающем меню - PullRequest
Новая
       23

Я хочу двустороннюю привязку в выпадающем меню

0 голосов
/ 14 марта 2019

Я хочу использовать двухстороннее связывание в моем компоненте.но это не работаетЯ не понимаю, почему?

О деталях:

Событие клика DropdownComponent изменяет выбранную переменную.но я хочу синхронизировать изменения AppComponent переменная select.

это мой stackblitz .

Я ожидаю точно так же, как это пример

Ответы [ 3 ]

1 голос
/ 14 марта 2019

Чтобы использовать двустороннюю привязку для свойства foo, вам необходимо сопутствующее свойство с именем fooChanged

Синтаксис [(x)] легко продемонстрировать, когда элемент имеетустанавливаемое свойство с именем x и соответствующее событие с именем xChange.Вот SizerComponent, который соответствует шаблону.Он имеет свойство size 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

0 голосов
/ 14 марта 2019

Измените свой компонент приложения следующим образом

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>
0 голосов
/ 14 марта 2019

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>

, и он должен работать.

...