ngModel 的使用方法ngModel 在使用上的方式

我目前负责现场的前端开发工作，在此期间对ngModel产生了兴趣，我希望能够总结一下。

ngModel是什么？

通过使用ngModel，可以实现HTML和TypeScript之间的双向绑定来绑定属性。

在HTML表单元素中，包括input和select等需要输入或选择的操作，
可以将屏幕上的输入反映到内部的TypeScript代码中，
或者将从TypeScript处理中获取的文本或值反映到屏幕上。
在这种情况下，可以使用ngModel来在屏幕和内部处理之间双向处理值。

项目准备

首先从使Angular可用开始…
您可以使用以下命令安装Angular。

$npm install -g @angular/cli

当 Angular 安装完成后，接下来我们将启动项目。

// new以降で、作成したプロジェクト名を指定します
$ng new ngModel-sample

// 以下から、プロジェクトの作成にあたり、オプションを聞かれています
// こちらはAngular上でrouting機能を実装するかどうかを聞かれています
? Would you like to add Angular routing? (y/N)

// 次にスタイルシートのテンプレートエンジンを選択します
❯ CSS 
  SCSS   [ http://sass-lang.com/documentation/file.SASS_REFERENCE.html#syntax ] 
  Sass   [ http://sass-lang.com/documentation/file.INDENTED_SYNTAX.html       ] 
  Less   [ http://lesscss.org                                                 ] 
  Stylus [ http://stylus-lang.com                                             ]  

// この後に色々と必要な資材を作成してくれます

// そして以下の文言が表示されれば、プロジェクトの作成は完了です！
✔ Packages installed successfully.
    Successfully initialized git.

完成项目后，我们将创建一个使用简单ngModel的程序。

app.module.ts 的中文释义是 “应用模块”

ngModel在angular/forms的FormsModule中包含。
因此，首先要导入FormsModule。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
// こちらを追加
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    // こちらを追加
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

组件.html

下一步我们将编辑一个使用ngModel的HTML文件，其中包含用于输入姓名的文本框和显示已输入姓名的功能。

<div>
  <!-- インプットタイプをテキストボックにし、入力された値を変数 name として受け取る -->
  <input type="text" [(ngModel)]="name">
</div>
<div>
  <!-- {{name}} に入力された値が反映される -->
  <p>あなたのお名前は {{name}} さん</p>
</div>

app.component.ts 的中文释义如下：

我们将通过HTML文件将输入的名字作为”name”进行处理设置。
为了在ngModel中进行双向绑定处理，我们还需要在JavaScript文件中定义如何处理”name”。
这次我们会将初始显示状态设置为’name = ‘ ‘，即为空白。

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'ngModel-sample';
  // こちらを追加
  name = ' ';
}

总结

我已经介绍了关于ngModel的使用方法和简单的实现。实际上，实现本身是非常简单的，但它是一个很方便的功能，所以请记住它并确保在实践中能够熟练掌握和使用。