findIndex

最新推荐文章于 2024-02-20 16:19:20 发布

tommoq

最新推荐文章于 2024-02-20 16:19:20 发布

阅读量112

点赞数

文章标签： angular

本文链接：https://blog.csdn.net/weixin_47198950/article/details/114981548

版权

<ul>
  <li *ngFor="let item of list">
    <div>
      <h1>{{item.name}}</h1>
      <div>{{item.height}}</div>
    </div>
    <div style="position: relative;right: 0px;top: 0px;" (click)="deleted(item.productId)">删除</div>
  </li>
</ul>

import { Component, ChangeDetectionStrategy } from '@angular/core';
import { NzModalService } from 'ng-zorro-antd/modal';
import { NzMessageService } from 'ng-zorro-antd/message';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.less'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DashboardComponent {
  constructor(private modalService: NzModalService, private msg: NzMessageService) { }
  // public list: any[] = []
  public list: any[] = [
    { productId: '1', name: 'aa', height: '162' },
    { productId: '2', name: 'bb', height: '162' },
    { productId: '3', name: 'cc', height: '162' },
    { productId: '4', name: 'dd', height: '162' },
  ];

  deleted(id: any) {
    console.log(111);
    let index = this.list.findIndex((v) => v.productId == id);
    this.modalService.confirm({
      nzContent: 'ddd',
      nzOnOk: () => {
        this.list.splice(index, 1);
        this.msg.success('删除成功');
      }
    })
  }

}