Как работает ngModel в учебнике Angular Tour of Heroes? - PullRequest
Новая
       30

Как работает ngModel в учебнике Angular Tour of Heroes?

0 голосов
/ 09 сентября 2018

1-й пост здесь. Итак, я слежу за Angular Tour героев, использующих Angular 6, и я понимаю, как работает ngModel ... по большей части. Я просто не понимаю, как он может изменить мои данные в списке, когда ngModel назначена другая переменная. Вот мой код ниже:

героев назначается список фиктивных данных с типом Hero , состоящим из идентификатора и имени.

Это показывает список героев через переменную с именем hero

При нажатии герой герой получает selectedHero .

Оттуда под списком отображаются сведения о герое.

Я понимаю, что при использовании ngModel во входе изменяется selectedHero.name, но как он может изменить имя hero.name в списке и как я могу помешать ему изменить это?

ps, я новичок здесь, я не смог найти ничего, что могло бы ответить на это. Так что извиняюсь, если я разместил это не в том месте.

heroes.component.html 

<h2>My Heroes</h2>
<ul class="heroes">
  <!--calls function when selected and changes the background color to the selected class-->
  <li *ngFor="let hero of heroes"
      (click)="onSelect(hero)"
      [class.selected]="hero === selectedHero">

    <span class="badge">{{hero.id}}</span> {{hero.name}}
  </li>
</ul>

<div *ngIf="selectedHero">
  <h2>{{ selectedHero.name }}</h2>
  <div>id: {{ selectedHero.id }}</div>
  <div>
    <label>name:
      <input [(ngModel)]="selectedHero.name" placeholder="Hero Name">
    </label>
  </div>
</div>

heroes.component.ts 

import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero';
import { HEROES } from '../mock-heroes';

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {
  heroes = HEROES;
  selectedHero: Hero; // undefined until selected
  onSelect(hero: Hero) {
    this.selectedHero = hero;
  }

  constructor() { }

  ngOnInit() {
  }

}

Герои HTML-страница

1 Ответ

0 голосов
/ 09 сентября 2018

ngModel использует двустороннюю привязку данных. Это означает, что переменная selectedHeros.name на входе является ссылкой на элемент героя в списке heroes. У вас нет отдельной переменной для поля ввода. Поэтому, если вы измените значение selectedHero.name в поле ввода, вы измените непосредственно значение элемента в списке.

Вот хорошее объяснение двусторонней привязки данных . В примере, который вы видите, вы можете переписать ngModel во входных данных также с помощью: 

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

С ngModel вы не можете предотвратить изменение переменных в списке. Но вы можете переписать ввод, чтобы избежать ngModel. Например, вы можете использовать следующее: 

<input [value]="selektedHero.name"></input>

При этом у вас будет значение selektedHero.name в поле ввода, но если вы измените это значение, оно не изменит переменные в списке.

Сравнение двух подходов: 

<input [(ngModel)]="selectedEntry">
<br/>
<input [value]="selectedEntry">
<br/>
{{selectedEntry | json}}

Здесь у вас есть оба подхода. Если вы измените текст первого поля ввода на вашем веб-сайте, значение selectedEntry изменится. Однако если вы измените текст во втором поле ввода, значение selectedEntry не изменится (только односторонняя привязка данных). То же самое относится к директивам @ Input . В этом случае создается только ссылка на фактическую переменную.

...