带薪学习angular,实现一个用户表格

写法都是html,ts与css分离式,本人也是第一次看文档学习去写一个表格,大佬多指点勿喷!

在modules.ts文件中导入需要的控件 书写需要的html代码

   <div>
    <button nz-button nzType="primary" (click)="addRow()">Add</button>
    <nz-modal
      [(nzVisible)]="isVisible"
      nzTitle="Modal"
      nzOkText="Ok"
      nzCancelText="Cancel"
      (nzOnOk)="handleOk()"
      (nzOnCancel)="handleCancel()"
    >
      <ng-container *nzModalContent>
        name :<input nz-input placeholder="please enter" [(ngModel)]="nameValue" />
        age :<input nz-input placeholder="please enter" [(ngModel)]="ageValue" />
        height :<input nz-input placeholder="please enter" [(ngModel)]="heightValue" />
        weight :<input nz-input placeholder="please enter" [(ngModel)]="weightValue" />
      </ng-container>
    </nz-modal>
  </div>
   <br />
   <br />
<nz-table
      #rowSelectionTable
      nzShowSizeChanger
      [nzData]="listOfData"
      (nzCurrentPageDataChange)="onCurrentPageDataChange($event)"
    >
      <thead>
        <tr>
          <th
            [nzSelections]="listOfSelection"
            [(nzChecked)]="checked"
            [nzIndeterminate]="indeterminate"
            (nzCheckedChange)="onAllChecked($event)"
          ></th>
          <th>name</th>
          <th>age</th>
          <th>height</th>
          <th>weight</th>
          <th>operate</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let data of rowSelectionTable.data">
          <td [nzChecked]="setOfCheckedId.has(data.id)" (nzCheckedChange)="onItemChecked(data.id, $event)"></td>
          <td>{{ data.name }}</td>
          <td>{{ data.age }}</td>
          <td>{{ data.height }}cm</td>
          <td>{{ data.weight }}kg</td>
          <td>
            <!-- <a (click)="startEdit(data.id)">Edit</a> -->
            <a nz-popconfirm nzPopconfirmTitle="Sure to delete?" (nzOnConfirm)="deleteRow(data.id)">Delete</a>
          </td>
        </tr>
      </tbody>
    </nz-table>

书写对应的逻辑代码写在对应的compontent.ts文件夹中

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

interface ItemData {
  id: number;
  name: string;
  age: number;
  height: number;
  weight:number,
}
@Component({
  selector: 'nz-demo-table-basic',
  // selector: 'app-welcome',
  templateUrl: './welcome.component.html',
  styleUrls: ['./welcome.component.css']
})
export class WelcomeComponent implements OnInit {
  message: any;
  i = 0;
  checked = false;
  indeterminate = false;
  listOfCurrentPageData: readonly ItemData[] = [];
  listOfData: readonly ItemData[] = [];
  setOfCheckedId = new Set<number>();
  // 定义新增里绑定的数据
  nameValue?: string='';
  ageValue?: number;
  heightValue?: number;
  weightValue?: number;
  
  constructor() { }
    listOfSelection = [
      {
        text: 'Select All Row',//选择全部行
        onSelect: () => {
          this.onAllChecked(true);
        }
      },
      {
        text: 'Select Odd Row',//选择奇数行
        onSelect: () => {
          this.listOfCurrentPageData.forEach((data, index) => this.updateCheckedSet(data.id, index % 2 !== 0));
          this.refreshCheckedStatus();
        }
      },
      {
        text: 'Select Even Row',//选择偶数行
        onSelect: () => {
          this.listOfCurrentPageData.forEach((data, index) => this.updateCheckedSet(data.id, index % 2 === 0));
          this.refreshCheckedStatus();
        }
      }
    ];

    updateCheckedSet(id: number, checked: boolean): void {
      if (checked) {
        this.setOfCheckedId.add(id);
      } else {
        this.setOfCheckedId.delete(id);
      }
    }
  
    onItemChecked(id: number, checked: boolean): void {
      this.updateCheckedSet(id, checked);
      this.refreshCheckedStatus();
    }
  
    onAllChecked(value: boolean): void {
      this.listOfCurrentPageData.forEach(item => this.updateCheckedSet(item.id, value));
      this.refreshCheckedStatus();
    }
  
    onCurrentPageDataChange($event: readonly ItemData[]): void {
      this.listOfCurrentPageData = $event;
      this.refreshCheckedStatus();
    }
  
    refreshCheckedStatus(): void {
      this.checked = this.listOfCurrentPageData.every(item => this.setOfCheckedId.has(item.id));
      this.indeterminate = this.listOfCurrentPageData.some(item => this.setOfCheckedId.has(item.id)) && !this.checked;
    }
   //  定义弹出框的属性显示与隐藏
   isVisible = false;
  //  新增弹框==点击取消
   handleCancel(): void {
     this.isVisible = false
     this.nameValue=''
     this.ageValue=undefined
     this.heightValue=undefined
     this.weightValue=undefined
   }
    // 新增add
    addRow(): void {
      this.isVisible = true;
      console.log(this.listOfData,256);
    }
    //  点击确定
   handleOk(): void {
    this.isVisible = false;
   //  加个判断如果为undefined使其等于0,改变类型为number
    if(this.ageValue==undefined||this.heightValue==undefined||this.weightValue==undefined){
     this.ageValue=0
     this.heightValue=0
     this.weightValue=0
    }
   //  赋值
    this.listOfData = [
      {
        id: this.i,
        name: `${this.nameValue}`,
        age: this.ageValue,
        height:this.heightValue,
        weight:this.weightValue
      }, ...this.listOfData
    ];
    this.handleCancel()//取消
  }
    //  删除delete
    deleteRow(id: number): void {
      // console.log('点击了删除按钮',456);
      this.listOfData = this.listOfData.filter(d => d.id !== id);
    }
    
  // 此处方法添加生命周期只被调用一次
    ngOnInit(): void {
      this.listOfData = new Array(20).fill(0).map((_, index) => ({
        id: index,
        name: `Edward King ${index}`,
        age: 32,
        height:Number((Math.random() * 190).toFixed(0)),
        weight:Number((Math.random() * 100).toFixed(0))
      }));
    }
  }