Angular6学习笔记5：修改组件的属性并实时显示(ngModel)

Love The Way You Lie 2022-05-09 03:44 325阅读 0赞

# 修改组件的属性并实时显示(ngModel) #

继学习笔记4以后，可以在一个AppComponent中显示了heroesComponent的属性信息，但是hero的Name往往是可以更改的，并将更改后的数据进行实时显示。

## 1.将hero的Name重构 ##

1.  `<div>`
2.  `<label>name:`
3.  `<input [(ngModel)]="hero.name" placeholder="name">`
4.  `</label>`
5.  `</div>`

**注意：\[(ngModel)\]** 是 Angular 的双向数据绑定语法。这里把 `hero.name` 属性绑定到了 HTML 的 input 元素上，以便数据流可以**双向流动**：从 `hero.name` 属性流动到 input，并且从 input 流回到 `hero.name` 。

此时保存文件，浏览器刷新，会什么都没有了，查看浏览器的控制台发现报错了：

![70][]

这里报错的原因：**使用了 `[(ngModel)]` ，ngModel 是一个有效的 Angular 指令，不过它在默认情况下是不可用的，它属于一个可选模块 FormsModule。**

## 2.导入FormsModule ##

关键名词

**元数据（metadata）***：*Angular 需要知道如何把应用程序的各个部分组合到一起，以及该应用需要哪些其它文件和库的信息

有些元数据位于 `@Component` 装饰器中，把它加到组件类上。 另一些关键性的元数据位于 [`@NgModule`][NgModule] 装饰器中。

最重要的 `@NgModule` 装饰器位于顶级类 **AppModule** 上。

Angular CLI 在创建项目的时候就在 `src/app/app.module.ts` 中生成了一个 `AppModule` 类。

*  打开AppModule（app.module.ts）从 `@angular/forms` 库中导入FormsModule

import { FormsModule } from '@angular/forms';

*  在FormsModule 添加到 `@NgModule` 元数据的 `@NgModule.imports` 数组中，imports数组中的元素是应用所需的外部模块

1.  `imports: [`
2.  `BrowserModule,`
3.  `FormsModule`
4.  `],`

保存刷新浏览器，会发现显示又正常了：

![70 1][]

在输入框中改变name的值，上面显示的hero的name也会随之改变

3.声明HeroesComponent

每个组件都必须声明在（且只能声明在）一个NgModule中。

但是这次在使用HeroesComponent组件时，并没有经历声明组件的过程

因为 Angular CLI 在生成 `HeroesComponent` 组件的时候就自动把它加到了 **`AppModule`** 中。

打开 `src/app/app.module.ts` 你就会发现 `HeroesComponent` 已经在顶部导入过了

import { HeroesComponent } from './heroes/heroes.component';

[70]: /images/20220509/2195a1d1c57a48a899bbae504771bc0b.png
[NgModule]: https://www.angular.cn/guide/ngmodules
[70 1]: /images/20220509/05f468c4acec40a1b8ab0fcba33ad92a.png

发表评论取消回复

表情：

评论列表（有 0 条评论，325人围观）

还没有评论，来说两句吧...

相关阅读

相关 Angular6 学习笔记——指令

angular6.x系列的学习笔记记录,仍在不断完善中,学习地址: [https://www.angular.cn/guide/template-syntax][htt

偏执的太偏执、/ 2023年05月30日 15:58/ 0 赞/ 19 阅读

相关 Angular6 学习笔记——组件详解之模板语法

angular6.x系列的学习笔记记录,仍在不断完善中,学习地址: [https://www.angular.cn/guide/template-syntax][htt

深藏阁楼爱情的钟/ 2023年05月30日 15:55/ 0 赞/ 13 阅读

相关 Angular6学习笔记（七）父子组件通信

一、父组件给子组件传值 @Input 父组件给子组件不仅可以传递简单的数据，还可以把父组件的方法以及整个父组件传递给子组件。 1、父组件调用子组件的时候传入数据

淩亂°似流年/ 2023年02月21日 12:29/ 0 赞/ 20 阅读

相关 Angular2~6 [(ngModel)] 与 formControlName 共存（实用）

原文出处：[https://www.jianshu.com/p/6d075cc506a0][https_www.jianshu.com_p_6d075cc506a0] 延伸

﹏ヽ暗。殇╰゛Y/ 2022年10月01日 13:57/ 0 赞/ 161 阅读

相关 Angular 2 ngForm中的ngModel、[ngModel]和[(ngModel)]的写法

原文出处：[https://www.jb51.net/article/117465.htm][https_www.jb51.net_article_117465.htm]

左手的ㄟ右手/ 2022年05月17日 04:04/ 0 赞/ 213 阅读

相关 Angular6学习笔记5：修改组件的属性并实时显示(ngModel)

修改组件的属性并实时显示(ngModel) 继学习笔记4以后，可以在一个AppComponent中显示了heroesComponent的属性信息，但是hero的Name往

Love The Way You Lie/ 2022年05月09日 03:44/ 0 赞/ 326 阅读

相关 angular6学习(十一)：属性指令

一：ngStyle 设置样式： ts文件： ![70][] html文件 ![70 1][] 引用app-server ![70 2][] 显示： ![

亦凉/ 2022年05月09日 03:42/ 0 赞/ 198 阅读

相关 Angular6组件化

前言大家再用angular的时候都知道它有种种好处，其中一个就是组件化，下面介绍一下它的简单应用 ![这里写图片描述][70] //component.ts页

「爱情、让人受尽委屈。」/ 2022年05月09日 02:24/ 0 赞/ 247 阅读

相关 Angular6学习笔记3：修改Angular组件:app.component

Angular组件继学习笔记2后，启动应用。浏览器出现如下界面： ![70][] 这个是由一个名称是 “`AppComponent”` 的 Angular 组件控制

小灰灰/ 2022年05月09日 01:52/ 0 赞/ 296 阅读

相关 Angular6学习笔记7: 主从组件

主从组件继学习笔记6，现在可以在页面上显示一个数组，但是原则上不能将所有特性放在同一个组件中，因为如果将所有特性放在同一个组件中，当特性特别多时，组件就变得不好维护了。

迷南。/ 2022年05月08日 07:34/ 0 赞/ 273 阅读