![](/img/trans.png)
[英]How does onSelect(hero: Hero) modify heroes=HEROES in angular tour heroes tutorial
[英]How is ngModel working in the Angular Tour of Heroes Tutorial?
第一篇文章在这里。 因此,我使用Angular 6追踪了英雄的Angular Tour,并且我了解了ngModel的工作原理。 当ngModel分配了另一个变量时,我只是不知道如何更改列表中的数据。 这是我的代码如下:
英雄被分配了模拟数据列表,其英雄类型由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() {
}
}
ngModel
使用双向数据绑定。 这意味着,该变量selectedHeros.name
在输入是在列表中的英雄项的引用heroes
。 您没有用于输入字段的单独变量。 因此,如果您在输入字段中更改selectedHero.name
的值,则可以直接更改列表中该项的值。
这是双向数据绑定的一个很好的解释。 在您可以看到的示例中,您还可以使用ngModel
在输入中重写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指令也是如此 。 在这种情况下,仅创建对实际变量的引用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.