时间戳

首页 > 解决方案 > Angular - 在循环中的特定项目上显示消息

angular - Angular - 在循环中的特定项目上显示消息

问题描述

我有一个使用 For Loop 的行列表。点击任意一行，弹出一个模态窗口。模式窗口包含一个取消和确定按钮。单击“确定”按钮时，应在单击的 ROW 上显示一条消息。目前我可以获得该行的索引号，并且单击“确定”时该消息显示在所有行上。如何仅在该特定行上显示消息。

<div class="row" *ngFor="let item of items; let i = index">


<div class="row">
    <div class="col-2">
        <span (click)="showModalWindow">
            <img class="actionIcon" src="images/action.png" />
        </span>
    </div>
    <div class="col-4">
        <div class="ietm-img" *ngIf="item.image">
            <img [src]="item.image" alt="item" />
        </div>
    </div>
    <div class="col-6">
        <div class="text">
            <h6>{{item.name}}</h6>
            <p>MESSAGE NEEDS TO APPEAR ONLY ON THE SELECTED ROW</p>
            <span>{{item.measurement}} {{item.length}}</span>
        </div>
    </div>
</div>

标签： angular

解决方案

由于您的数据似乎来自 API，您可能无法添加其他属性来跟踪行的选定状态。

考虑在单击行时捕获选定的行，如下所示，

<span (click)="showModalWindow(); selectedRow=i" style="border:1px solid red">

然后可以设置点击该行时的隐藏状态，

<p [hidden]="selectedRow !== i">MESSAGE NEEDS TO APPEAR ONLY ON THE SELECTED ROW</p>

在您的组件中，您需要一个变量来捕获状态

selectedRow: Number;`

完成的模板看起来像这样：

<div class="row" *ngFor="let item of items; let i = index">
  <div class="row">
    <div class="col-2">
          <span (click)="showModalWindow(); selectedRow=i" style="border:1px solid red">
              <img class="actionIcon" src="images/action.png" />
          </span>
    </div>
    <div class="col-4">
      <div class="ietm-img" *ngIf="item.image">
        <img [src]="item.image" alt="item" />
      </div>
    </div>
    <div class="col-6">
      <div class="text">
        <h6>{{item.name}}</h6>
        <p [hidden]="selectedRow !== i">MESSAGE NEEDS TO APPEAR ONLY ON THE SELECTED ROW</p>
        <span>{{item.measurement}} {{item.length}}</span>
      </div>
    </div>
  </div>
</div>

推荐阅读