Angular는 양식에 채워진 데이터를 테이블에 렌더링하는 것을 구현합니다.

이 글은 Angular가 폼에 채워진 데이터를 테이블로 렌더링하는 방법을 주로 소개합니다. 필요한 친구들이 참고할 수 있기를 바랍니다.

1. 프로젝트 소개

Angular 프레임워크를 사용하여 데모를 만들어 보겠습니다. 이 데모에서 구현할 기능은 다음과 같습니다.

X 좌표 및 Y 좌표 텍스트 상자에 정보를 입력하고, 그런 다음 추가를 클릭하면 해당 데이터가 아래 표에 표시되며, 각 항목 옆에 있는 삭제 버튼을 클릭하면 해당 정보가 삭제됩니다.

테이블 데이터는 자주 새로 고쳐지기 때문에 컴포넌트로 분리합니다.

2. 프로젝트 디렉토리

---------app

------------dataTable(폴더)

------------ dataTable .comComponent.html

------------dataTable.comComponent.css

------------dataTable.comComponent.ts

----- ----app.comComponent.html

----------app.comComponent.css

------------app.comComponent.ts

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

3.코드 설명

1.app.comComponent.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.comComponent.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() 함수에서 이 두 변수를 초기화해야 합니다. 이를 사용해야 합니다. 그렇지 않으면 전역 범위에 선언된 변수를 얻을 수 없습니다. 추가 버튼을 클릭하여 양식의 데이터를 가져오기 때문에 논리적으로 additem() 함수에 획득 단계를 넣어야 합니다. 여기에는 새로운 작성 방법도 있습니다. 데이터를 가져오기 위해

this.xcood = document.getElementsByName('xcood')[0].value;를 직접 사용하기 전에

그래서 인터넷에서 찾아봤기 때문입니다. .위의 작성 방법으로 대체됩니다.

처음에 addArray 배열을 선언했습니다. 이 배열은 additem() 함수가 호출될 때마다 얻은 데이터가 이 배열에 푸시됩니다.

다음으로 하위 구성 요소에서 이 배열을 받아 테이블에 렌더링해야 합니다.

3.dataTable.comComponent.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.comComponent.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

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

에 새 dataTable 구성 요소를 등록하는 것을 잊지 마세요. 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!