Angular は、フォームに入力されたデータをテーブルにレンダリングする実装します。

この記事では、Angular がフォームに入力されたデータをテーブルにレンダリングする方法を主に紹介します。これを必要とする友人が参考になれば幸いです。

1. プロジェクトの紹介

Angular フレームワークを使用してデモを作成します。このデモが実装する機能は次のとおりです:

X 座標と Y 座標のテキスト ボックスに情報を入力します。 [追加] をクリックすると、対応するデータが下の表に表示され、各項目の横にある [削除] ボタンをクリックすると、情報が削除されます。

テーブルデータは頻繁に更新されるため、コンポーネントとして分離します。

2. プロジェクトディレクトリ

----------app

----------dataTable (フォルダ)

------------ dataTable .component.html

------------dataTable.component.css

------------dataTable.component.ts

----- - ----app.component.html

----------app.component.css

----------app.component.ts

---- - -----app.module.ts

3. コードの説明

1.app.component.html

最初にメインフレームワークを書きましょう

 
 
 
 X坐标  
 
 Y坐标  
 添加 
 
 
  
 

ここでngx-bootstrapを使用します、最後にこの記事では、これをインポートする方法を説明します。

2.app.component.ts

親コンポーネントに機能を追加するには、additem() メソッドを使用する必要があります

import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { addArray=[]; xcood: any; ycood: any; additem(){ this.xcood = (document.getElementsByName('xcood')[0] as HTMLInputElement).value; this.ycood = (document.getElementsByName('ycood')[0] as HTMLInputElement).value; this.addArray.push({ xcood:this.xcood, ycood:this.ycood }) } }

ここで、

xcood: any;

を定義しない場合ycood : any;

の場合、次のエラーが発生します

変数を宣言せずに直接初期化すると、間違いなく問題が発生します。覚えておくべきことは、どの変数を使用するかということです。最初に変数を宣言してから行う必要があります。初期化します。

additem() 関数では、これら 2 つの変数を必ず初期化する必要があります。そうしないと、グローバル スコープで宣言された変数が取得されません。追加ボタンをクリックしてフォーム内のデータを取得するため、論理的には取得ステップを additem() 関数に含める必要があります。ここにも新しい書き方があります。以前は

this.xcood = document.getElementsByName('xcood')[0].value; を使用してデータを取得していたため、インターネットで探しました。 . 上記の書き方に置き換えます。

最初に addArray 配列を宣言しました。この配列には、additem() 関数が呼び出されるたびに、データ オブジェクトが 1 つずつ格納されます。

次に、この配列をサブコンポーネントで受け取り、テーブルにレンダリングする必要があります。

3.dataTable.component.html

 
 
 
X坐标
 
Y坐标
 
操作
 
 
 
 
 
{{data.xcood}}
 
{{data.ycood}}
 
删除
 
 
 

import { Component,Input } from '@angular/core'; @Component({ selector: 'data-table', templateUrl: './dataTable.component.html', styleUrls: ['./dataTable.component.css'] }) export class DataTableComponent { @Input() array:any;//接收父组件传递过来的addArray数组 index: number; //跟上面说的一样要先声明 delete(data){ this.index = this.array.indexOf(data); if (this.index > -1) { this.array.splice(this.index, 1);//跟上面说的一样在初始化的时候要用到this } } }

5.app.module.ts

新しい dataTable コンポーネントを app.module.ts に忘れずに登録してください

import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { DataTableComponent } from './dataTable/dataTable.component'; @NgModule({ declarations: [ AppComponent, DataTableComponent ], imports: [ BrowserModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

は実際には非常に簡単です。最初に行う必要があります。 cmd に「cnpm install ngx-bootstrap --save」と入力して、現在のディレクトリにモジュールをインストールします

次に、

コードは次のとおりです:

関連する推奨事項:

以上がAngular は、フォームに入力されたデータをテーブルにレンダリングする実装します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。