ngModel 在 Angular 英雄之旅教程中是如何工作的？答案

【问题标题】：How is ngModel working in the Angular Tour of Heroes Tutorial?ngModel 在 Angular 英雄之旅教程中是如何工作的？
【发布时间】：2019-02-14 04:47:30
【问题描述】：

这里的第一篇文章。所以我正在关注使用 Angular 6 的 Angular 英雄之旅，并且我了解了 ngModel 是如何工作的……在大多数情况下。当 ngModel 被分配一个不同的变量时，我只是不明白它是如何更改列表中的数据的。下面是我的代码：

heroes 被分配了一个由 ID 和名称组成的 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() {
  }

}

Heroes HTML page

【问题讨论】：

因为都是引用。 selectedHero 只不过是指向列表中某个元素的指针。如果你不想改变它，你可能不应该在你的模型中使用selectedHero.name，而是其他的东西，例如public String selectedHeroName;
确实，它与 Angular 无关，而是与对象和引用在 JavaScript（以及大多数 OO 语言）中的工作方式有关。它几乎就像在现实生活中一样。如果您有一个装有空瓶子的盒子，并且您将瓶子装满水，那么您的盒子现在就装满了瓶子。

标签： angular typescript frontend angular6 angular-ngmodel

【解决方案1】：

ngModel 使用双向数据绑定。这意味着，输入中的变量selectedHeros.name 是对列表heroes 中英雄项目的引用。输入字段没有单独的变量。因此，如果您在输入字段中更改selectedHero.name 的值，您将直接更改列表中项目的值。

这是对two-way-data binding 的一个很好的解释。在您可以看到的示例中，您也可以使用以下代码重写输入中的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 指令也是如此。在这种情况下，只会创建对实际变量的引用。

【讨论】：