ngModel在《 Angular Tour of Heroes教程》中如何工作?

时间:2018-09-09 15:45:23

标签: angular typescript frontend angular6 angular-ngmodel

第一篇文章在这里。 因此,我使用Angular 6追踪了英雄的Angular Tour,并且我了解了ngModel的工作原理。当ngModel分配了另一个变量时,我只是不知道如何更改列表中的数据。这是我的代码如下:

英雄分配了模拟数据列表,其模拟类型为 Hero ,由ID和名称组成。

这通过一个名为 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

1 个答案:

答案 0 :(得分:0)

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指令也是如此。在这种情况下,仅创建对实际变量的引用。