ng-zorro弹窗示例

<nz-table #basicTable [nzData]="listOfData">
    <thead>
      <tr>
        <th>Name</th>
        <th>price</th>
        <th>Address</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let data of basicTable.data">
        <td>{{data.name}}</td>
        <td>
            <input nz-input [(ngModel)]="data.price" (ngModelChange)=change($event)>
        </td>
        <td>{{data.address}}</td>       
      </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>合计</th>
            <th>{{total}}</th>
            <th>---</th>
          </tr>
    </tfoot>
  </nz-table>
  <button (click)="createModal()" nz-button>匹配</button>

export class WelcomeComponent implements OnInit {

  constructor(private http: HttpClient, private msg: NzMessageService,private modal:NzModalService) {}
  // 需要合计的值
  total:any;
  ngOnInit(): void { 
    this.calc();
  }

  listOfData = [
  {
    key: 1,
    name: 'John Brown',
    price: 32,
    address: 'New York No. 1 Lake Park'
  },
  {
    key: 9,
    name: 'Edward King 9',
    price: 32,
    address: 'London, Park Lane no. 9'
  },
 ];

 // 当输入框中的值发生变化的时候
 change($event){
   this.calc();
 }

 // 计算器
 // 计算方法需要 
 // 01:页面初始化的时候，调用一次
 // 02：输入框中的值发生变化的时候，调用第二次
 // 03: 点击匹配按钮，把另外一个页面的输入带入到这个页面之后，在调用第三次
 calc(){
   let arrr=this.listOfData.map(item=>{return item.price});
   let arrrNumber=arrr.map(Number); 
   this.total=arrrNumber.reduce(function(item, next) {
     return item+next;
   },0);
 }

 createModal() {
  this.modal.create({
    nzContent:AaComponent ,
    nzComponentParams:{
      aa:this.listOfData
    },
    nzWidth:'1000PX',
    nzOnOk:(item)=>{

      if(Array.from(item.setOfCheckedId).length==0){
        const tt=this.modal.info({
          nzContent:'222222222222222',
          nzOnOk:()=>{
            tt.destroy();
          }
        })
      }else{
        // 01：获取弹框中传过来的选中的数组
        let requestData=item.requestData;

        // 02：更改数组对象里面的key键名字
        let newArr=requestData.map(item=>{          
          return {
            key:item.id,
            name:item.name,
            price:item.price,
            address:item.address,
          }
        })

        // 03：数组合并（有可能有重复数据呦）
        this.listOfData.push.apply(this.listOfData,newArr);
        
        // 04:去重<没有弹框>
        let obj={}
        this.listOfData=this.listOfData.reduce(function(item, next) {
          obj[next.key] ? '' : obj[next.key] = true && item.push(next);
          return item;
        }, []);

        this.calc();

        // 04:去重<弹框显示>
        // 此方法适用于单个决定性条件导致重复的
        // 找到导致重复的元素
        // const ids=this.listOfData.map(item=>item.key);
        // // 通过Set去除数组的重复项
        // const idsSet=new Set(ids);
        // // 比较数组的长度
        // if([...idsSet].length!==ids.length){
        //   this.modal.info({
        //     nzContent:'有重复项目',
           
        //   })
        // }

      }
    }
  });
}


}