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

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

<p class="container">
 <p class="row">
  <form>
   <p class="form-group">
    <label for="exampleInputEmail1">X坐标</label>
    <input type="text" class="form-control" id="exampleInputEmail1" placeholder="xcood" name="xcood">
   </p>
   <p class="form-group">
    <label for="exampleInputPassword1">Y坐标</label>
    <input type="text" class="form-control" id="exampleInputPassword1" placeholder="ycood" name="ycood">
   </p>
   <button type="button" class="btn btn-default" (click)="additem()">添加</button>
  </form>  
 </p>
 <p class="row">
  <data-table [array]="addArray"></data-table><!--导入dataTable组件，并且将父组件里面的form表单数据传递给子组件渲染-->
 </p>
</p>

ここで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

<table class="table table-striped">
 <thead>
  <tr>
   <th>X坐标</th>
   <th>Y坐标</th>
   <th>操作</th>
  </tr>
 </thead>
 <tbody *ngIf="array.length!==0"><!--这里我们判断一下传递过来的数组是否为空，如果是空的话我们就没有必要渲染出来了-->
  <tr *ngFor="let data of array">
   <td>{{data.xcood}}</td>
   <td>{{data.ycood}}</td>
   <td><button type="button" class="btn btn-default" (click)="delete(data)">删除</button></td>
  </tr>
 </tbody>
</table>

4.dataTable.component.ts

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
      }
  }
}

次に、削除ボタンの関数 delete() のロジックを記述します。必要な効果はどの項目であるかです。クリックするだけなので、最初に削除するデータ オブジェクトを取得し、次に親コンポーネントによって渡された配列内のデータ オブジェクトの位置を見つけて、splice() 関数を使用してそれを削除する必要があります。 。

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 { }

4. ngx-bootstrap のインポート

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

次に、

コードをプロジェクトの最終エクスポート HTML ファイルにコピーします

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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

最後に、スタイルを直接書くことができるので、それを使用します。

関連する推奨事項:

Reactサーバーレンダリングの基本的な実装方法

Vue.jsとASP.NET Coreのサーバーサイドレンダリング機能

Reactバックエンドレンダリングテンプレートエンジンnooxリリースの使用方法

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