angular - ngModel 在 Angular 英雄之旅教程中是如何工作的?
问题描述
第一个帖子在这里。因此,我正在使用 Angular 6 关注 Angular 英雄之旅,并且我了解了 ngModel 的工作原理……在大多数情况下。当 ngModel 被分配一个不同的变量时,我只是不明白它如何能够更改列表中的数据。下面是我的代码:
hero被分配了一个由 ID 和名称组成的Hero类型的模拟数据列表。
这是通过一个名为hero的变量显示英雄列表
当一个英雄被点击时,selectedHero被分配一个英雄。
从那里,英雄的详细信息显示在列表下方。
我知道在输入中使用 ngModel 时会更改 selectedHero.name,但是它如何更改列表中的 hero.name 以及如何阻止它更改?
ps,我是新来的,我找不到任何可以回答这个问题的东西。因此,如果我将其发布在错误的地方,我们深表歉意。
hero.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>
hero.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
输入中的变量是对 list 中 hero-item 的引用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指令也是如此。在这种情况下,只会创建对实际变量的引用。
推荐阅读
- parsing - 递归预测下降解析器是否需要构建完整的语法树并存储在内存中?
- mqtt - 无法从本地网络上的另一台机器连接到 mosquitto 代理
- c# - 调试 C# 时如何单步说明?
- c# - 如何在 Unity C# 中延迟为玩家添加更多生命值?
- c - 我不明白 inih 是如何工作的
- wxpython - 在 wxPython 中使用 wxFileConfig 时如何捕获文件未找到类型错误?
- r - 如何将(半)监督方法(结构主题模型,种子 lda)应用于只有一个主题的语料库,并在 r 中每年汇总它们的结果?
- linux - 为 ARM 交叉编译 Google Protobuf
- google-cloud-platform - 关于 SSL 证书,如何通过 HTTPS 正确使用 Google Cloud IoT Core?
- javascript - 使用 Puppeteer 的 page.$$eval() 错误