使用收藏按钮获取每一行的信息，并使用 *NgFor 添加收藏页面

Question

当我点击按钮时，我希望它能够获取所在行的信息。例如，当我单击第一行中的按钮时，我想获取该行的信息。我的网页如下

website page

我的html代码

<table id="news">
    <tr>
        <th *ngFor="let col of headers">
            {{col}}
        </th>
    </tr>

    <tr *ngFor="let new of news">
        <td *ngFor="let col of index">
            {{new[col]}}
        </td>
        <td>
            <button>Favorite</button>
         </td>
</table>

Answer 1

只需将“new”作为参数传递给函数

<button (click)="yourFunction(new)">Favorite</button>

如果你在 *ngFor 中声明 let i=index

，你也可以只传递列的索引

<!--see the let i=index-->
<tr *ngFor="let new of news; let i=index">
        <td *ngFor="let col of index">
            {{new[col]}}
        </td>
        <td>
            <button (click)="yourFunction(i)>Favorite</button>
         </td>
</tr>

Answer 2

  <table class="table table-dark">
        <thead>
          <tr>
            <th scope="col" *ngFor="let head of defaultTable.head">{{head}}</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let body of account ">
            <td >{{body._id}}</td>
            <td >{{body.EmailAddress}}</td>
            <td >{{body.Phone}}</td>
            <td >{{body.Street}}</td>
            <td >{{body.City}}</td>
            <td >{{body.State}}</td>
            <td *ngIf="show">Dactive</td>
            <td *ngIf="!show">Dactive</td>
            <td ><button (click)="Update(body._id)" >Update</button>
              <button (click)="delete(body._id)" >Delete</button></td>
             
            
          </tr>
        </tbody>
      </table>

使用收藏按钮获取每一行的信息，并使用 *NgFor 添加收藏页面

Get the information on each line with the favori button and add favory page with *NgFor

angular

typescript

ngfor