ngIf 对于当前按钮单击

Question

我正在从 api 中获取一些数据，在卡片中，10 个字段中总共有 10 个字段需要在按钮单击时显示 5 个，在按钮单击时我使用 ngIf 制作了自定义模式，不幸的是它给了我最后一个 id(card-data) on每次点击，我们能不能在 ngIf 上做点什么让这个模态只填充当前点击的按钮，

.ts

moreHospitalData = false;

viewMoreData(dataUser){
    this.moreHospitalData = true;
    console.log(dataUser);
  }
closeModal(){
    this.moreHospitalData = false;
  }

.html 代码

        <div class="hl-show-cards" *ngIf="users">
        <div ng-click='sortColumn("sno")' class="hl-card" *ngFor="let user of users.data | filter:searchText">
          <div class="hl-card-content">
            <p>Hospital Name:<span>{{user.hospitalName}}</span></p>
            <p>Hospital Description:<span>{{user.hospitalAddess}}</span></p>
            <p>Linked Insurance: <span class="tags">{{user.source}}</span></p>
          </div>
          <button class="hl-more-data" (click)="viewMoreData(user.srNo)">More{{user.srNo}}</button>
          <div class="modal-container-vm ng-cloak" *ngIf="moreHospitalData">
            <div class="modal-overlay-vm"></div>
              <div class="modal-card-vm">
                <p><strong>{{user.hospitalName}}</strong><sup>{{user.srNo}}</sup></p>
                <p>Brief Description<span>{{user.cityName}}</span></p>
                <p>Address<span>{{user.hospitalAddess}}</span></p>
                <p>Phone Number<span>{{user.contactNo}}</span></p>
                <p>Speciality<span>{{user.score}}</span></p>
                <p>Insurer<span class="tags">{{user.source}}</span></p>
                <span class="back-prev">
                  <button (click)="closeModal()">Back</button>
                </span>
              </div>
          </div>
        </div>
      </div>

Answer 1

首先，将模态移到 div 之外并使其全局化。 第二件事，声明一个名为 selectedDataUser 的变量并在下面的方法中用 dataUser 分配它

viewMoreData(dataUser){
   this.selectedDataUser =  dataUser;
    this.moreHospitalData = true;
    console.log(dataUser);
  }

并在模态中使用 selectedDataUser 。

它会像魅力一样工作！

Answer 2

这是我用SlicePipe实现它的方法

@Component({
  selector: 'app-dashboard',
  // templateUrl: './dashboard.component.html',
  // styleUrls: [ './dashboard.component.css' ]
})
export class DashboardComponent implements OnInit {
  potatosDashBoardArray: Potatos[] = [];

  constructor(private potatosService: MyPotatosService) { }

  ngOnInit() {
    // this.getPotatos();
  }

  // SLICE 1 and 5, returning only four of the Top potatos(2nd, 3rd, 4th, and 5th).
  getPotatos(): void {
    this.potatosService.getThemPotatos()
      .subscribe(potatosDashBoardArray=> this.potatosDashBoardArray= potatosDashBoardArray.slice(1, 5));
  }
}

html

 <h3>Top Potatos</h3>
    <div class="grid grid-pad">
      <a *ngFor="let potato of potatosDashBoardArray" class="col-1-4">
// here button getPotatos()
        <div class="module pot">
          <h4>{{potato.name}}</h4>
        </div>
      </a>
    </div>