Angular2 двусторонняя привязка данных

Ответ 1

Примечание. Прокрутите вниз ответ для привязки ng-модели.

На самом деле вы можете это сделать, просто вам нужно вызвать внутренний чек-лист (например, дайджест) для обновления привязки в зоне. Вы можете просто добавить для него событие (keyup). Аналогичным образом вы также можете использовать привязки директив с помощью словаря properties для параметров компонентов.

Пример: -

<input #label (keyup)> 
<!-- variable #label represented as the element itself and accessible as property on controller instance 
 You can even bind keyup to a function or another another function and pass value from the label property-->

Отобразить как:

<p>{{label.value}}</P>

Родительский компонент имеет текстовое поле и метку.

import { Component, bootstrap} from '@angular/core';
import {Display} from 'display';

@Component({
  selector: 'my-app',
  template: `<p><b>Parent Component:</b><p><input #label (keyup) (change)="handleChange(label.value)">
        <p>{{label.value}}</P> <display [text]="label"></display></p></p>`,
  directives: [Display]
})

class MainComponent {
  label: any;

  constructor() {

  }

  handleChange(label){
    this.label = label;
    console.log(this.label);
  }

}

Теперь показ его в дочернем компоненте:

@Component({
  selector: 'edit',
  template: `<p><b>Child Component:</b></p>{{text.value}}`
})

export class Edit {
    @Input() text:any;
}

Демо

Обновление - ng-модель для двусторонней привязки

Хотя Angular2 является однократной привязкой по умолчанию, ngModel введен сахар для достижения двухсторонней привязки. С этим вы могли бы сделать, например:

<input ngControl="name" [(ngModel)]="name">

Здесь использование квадратных скобок ([..]) предполагает привязку свойств и круглые скобки ((..)) для привязки события. В основном, когда вы используете ng-model, вы включаете обе привязки ngModel больше из события. За кулисами он создает наблюдаемое событие (с EventEmitter) для отслеживания изменений value связанного элемента и соответственно обновляет связанное свойство. Например: -

Включить formDirectives:

 import {FORM_DIRECTIVES} from '@angular/common';

и с формой

   <form (ngSubmit)="onSubmit()" let-f="form">
      <input ngControl="name" [(ngModel)]="name">
      <button>Click me and check console</button>
   </form>

без формы

  <input  [(ngModel)]="name">
  <button (click)="onSubmit()">Click me and check console</button>

больше не нужно включает в себя аннотацию formDirectives в аннотации вида.

@Component({
  template: .....,
  directives: [FORM_DIRECTIVES]
})

Забастовкa >

Демо

Также прочитайте хорошую запись от Виктора Савкина о двусторонней привязке в Angular2, создав событие ng-model и как оно работает.

Ответ 2

Теперь вы можете просто сделать это, используя ngModel, используя следующий синтаксис:

<input [(ngModel)]="myProp" />

Комбинация квадратных и круглых скобок означает "двустороннее связывание".

Пожалуйста, просмотрите plunk здесь

Ответ 3

Вы можете сделать это, присоединив к событиям в поле ввода и обновив внутреннее значение, как это сделано в этом примере:

http://plnkr.co/edit/lOFzuWtUMq1hCnrm9tGA?p=preview

Создайте компонент с внутренним атрибутом, который содержит метку this.label и обратный вызов changeLabel, который ожидает объект события

@Component({
  selector: 'app',
  templateUrl: 'bound.html'
})
class App {
  label: string;
  constructor() {
    this.label = 'default label'
  }
  changeLabel(event) {
    this.label = event.target.value;
  }
}

bootstrap(App);

Создайте свой шаблон и присоедините обратный вызов к соответствующему событию (вы можете прикрепить его к событию keypress, но тогда вам может понадобиться тайм-аут. Я приложил его к событию change для простоты (что означает, что вы можете необходимо отключить ввод, чтобы увидеть обновление).

<label for="myinput">{{label}}</label>
<input id="myinput" type="text"/>
<p></p>You can change the label above by typing something below</p>
<label for="labeltext">New Label Text</label>
<input type="text" id="labeltext" (change)="changeLabel($event)"/>

Ответ 4

Да есть двусторонняя привязка в angular2. См. Здесь: https://angular.io/docs/ts/latest/guide/template-syntax.html#!#ngModel

Итак, как использовать его в пользовательских компонентах?

Мне нравится делать это:

private currentSelectedItem: MachineItem;
@Output() selectedItemChange: EventEmitter<MachineItem> = new EventEmitter<MachineItem>();

@Input() set selectedItem(machineItem: MachineItem) {
    this.currentSelectedItem = machineItem;
    this.selectedItemChange.emit(machineItem); 
}

get selectedItem(): MachineItem {
    return this.currentSelectedItem; 
}

И используйте его как

<admin-item-list [(selectedItem)]="selectedItem"></admin-item-list>

Вы также можете испустить новое значение, где оно фактически изменено. Но мне очень удобно делать эту злободневность в методе сеттера и не нужно беспокоиться, например. когда я привязываю его непосредственно к моему представлению.

Ответ 5

Существует еще один способ обмануть Angular2 в двухстороннюю привязку. Не передавать свойство, а объект в компонент. Если вы передаете объект посредством односторонней привязки, все его свойства на самом деле являются двусторонними. Это делает компонент менее универсальным, поскольку он должен знать объект, но во многих случаях он по-прежнему полезен.

У меня есть компонент, который выглядит так:

import { Component, Input }    from "@angular/core";
import { NgSwitch, NgSwitchWhen, NgSwitchDefault }    from "@angular/common";

export class Movie
{
    public Title: string;
    public Rating: number;
    public Seen: boolean;
}

@Component
({
    selector: "hh-image-checkbox",
    template: `
        <div [ngSwitch]="movie.Seen"> 
            <div *ngSwitchWhen="true">
                <img src="/Content/res/CheckTrue.png" (click)="onClick()"> 
            </div> 
            <div *ngSwitchDefault> 
                <img src="/Content/res/CheckFalse.png" (click)="onClick()"> 
            </div> 
        </div>
        `,
    directives: [NgSwitch, NgSwitchWhen, NgSwitchDefault]
})

export class ImageCheckboxComponent
{
    @Input() movie: Movie;

    public onClick()
    {
        this.movie.Seen = !this.movie.Seen;
    }
}

Он вызывается следующим образом:

<hh-image-checkbox [movie]="movie"></hh-image-checkbox>

Сам объект фильма является односторонним, но все его свойства могут использоваться для двусторонней привязки.

Ответ 6

Вот простой plunker, который демонстрирует односторонние, двухсторонние и управляемые событиями подходы в действии в соответствии с Angular2 2.0.0-beta.17

http://plnkr.co/eXZMoU

Двустороннее событие и свойство

<input [(ngModel)]="name" />

Одностороннее свойство

<input [value]="name" />

Событие, управляемое

<input (input)="name=$event.target.value">

Мы можем копать Angular docs для больше

Ответ 7

Просто, попробуйте это;

<input [(ngModel)]="property" placeholder="property Value"/>
<h1>{{property}}</h1>