Angular 2-表格 - 芒果文档

📌 相关文章

📜 Angular 2-表格

📅 最后修改于: 2020-10-28 05:09:02 🧑 作者: Mango

Angular 2也可以使用ngModel指令设计可以使用双向绑定的表单。让我们看看如何实现这一目标。

步骤1-创建一个产品模型。创建一个名为products.ts的文件。

产品.ts

步骤2-在文件中放置以下代码。

export class Product { 
   constructor ( 
      public productid: number, 
      public productname: string 
   ) {  } 
}

这是一个简单的类，具有两个属性productid和productname。

步骤3-创建一个名为product-form.component.ts component的产品表单组件，并添加以下代码-

import { Component } from '@angular/core';
import { Product } from './products';

@Component ({
   selector: 'product-form',
   templateUrl: './product-form.component.html'
})

export class ProductFormComponent {
   model = new Product(1,'ProductA');
}

关于上述程序，需要注意以下几点。

创建Product类的对象，并将值添加到productid和productname。
使用templateUrl指定将呈现组件的product-form.component.html的位置。

步骤4-创建实际表单。创建一个名为product-form.component.html的文件，并放置以下代码。


   Product Form
   
      
         ID
         
      
      
      
         Name

关于上述程序，需要注意以下几点。

ngModel指令用于将产品对象绑定到表单上的单独元素。

步骤5-将以下代码放置在app.component.ts文件中。

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

@Component ({
   selector: 'my-app',
   template: ''
})
export class AppComponent { }

步骤6-将以下代码放置在app.module.ts文件中

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { ProductFormComponent } from './product-form.component';

@NgModule ({
   imports: [ BrowserModule,FormsModule],
   declarations: [ AppComponent,ProductFormComponent],
   bootstrap: [ AppComponent ]
})
export class AppModule { }

步骤7-保存所有代码并使用npm运行应用程序。转到浏览器，您将看到以下输出。

产品形式