ngModel是如何在“英雄角之旅”教程中工作的？

Question

第一帖在这里。因此，我使用角度6跟踪英雄的角度巡回赛，我了解到ngModel是如何工作的。大部分。我只是不明白当ngModel被分配了一个不同的变量时，它如何能够更改列表中的数据。下面是我的代码：

英雄被指定为模拟数据列表，其英雄类型由ID和名称组成。

这是通过一个名为英雄的变量来显示英雄的列表。

当一个英雄被点击时，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页面

Answer 1

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的值不会更改(仅为单向数据绑定)。@输入指令也是如此。在这种情况下，只创建对实际变量的引用。