html - 如何在 Angular 7 中使用 ngFor 单击关闭按钮时单独隐藏 div

Question

我有一个表，其数据来自循环。在这里，当我单击状态栏的“单击此处”时，将显示一个 div，当我再次单击该 div 的关闭按钮时，它应该隐藏。在这里它工作正常但它的工作就像点击“点击这里”时切换但我只需要在关闭按钮应该点击时关闭。这是下面的代码

app.component.html

<table class="table border">
    <thead>
    <tr>
      <ng-container *ngFor="let column of columns; let i = index">
        <th>{{ column }}</th>
      </ng-container>
    </tr>
    </thead>
    <tbody>
        <tr *ngFor="let row of groups;let i = index">
            <td>{{row.name}}</td>
            <td>{{row.items}}</td>
            <td (click)="hideme[i] = !hideme[i]">{{row.Status.length}}-<span style="border:1px solid;" >Click here</span>
               <div style="border:1px solid;padding:20px;position:absolute;background:#fff;" [hidden]="!hideme[i]"> <span  *ngFor="let item of row.Status;let j = index">
                    {{item.name}}
                    <span *ngIf="j != row.Status.length - 1">,</span></span><span style="position: absolute;
    top: 0;
    right: 0;cursor:pointer;">close</span></div>
           </td>
            <td>
                <span *ngFor="let item of row.loc;let k = index">
                   {{item.name}}
                   <span *ngIf="k != row.loc.length - 1">,</span>
                </span>     
           </td>
        </tr>
  </tbody>
  </table>

应用程序组件.ts

import { Component,ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent  {
selectedRow : Number;
 name = 'Angular';
 selectedgroup: any;
 hideme=[];

columns = ["name", "Items","status", "loc"];

  groups=[{
        "id": 1,
        "name": "pencils",
        "items": "red pencil",
        "Status": [{
            "id": 1,
            "name": "green"
        }, {
            "id": 2,
            "name": "red"
        }, {
            "id": 3,
            "name": "yellow"
        }],
        "loc": [{
            "id": 1,
            "name": "loc 1"
        }, {
            "id": 2,
            "name": "loc 2"
        }, {
            "id": 3,
            "name": "loc 3"
        }]
    },
    {
        "id": 2,
        "name": "rubbers",
        "items": "big rubber",
        "Status": [{

            "name": "green"
        }, {

            "name": "red"
        }],
        "loc": [{

            "name": "loc 2"
        }, {

            "name": "loc 3"
        }]
    },
    {
        "id": 3,
        "name": "rubbers1",
        "items": "big rubber1",
        "Status": [{

            "name": "green"
        }, {

            "name": "red"
        }],
        "loc": [{

            "name": "loc 2"
        }, {

            "name": "loc 3"
        }]
    }

];
}

Answer 1

现在您只使用了一个 (click)打开和关闭的处理程序。您必须将这两个操作分开。

删除您的 (click) <td> 上的处理程序并将其放在 Click Here 上span 只是为了打开。

<td>{{row.Status.length}}-<span (click)="hideme[i] = true" style="border:1px solid;" >Click here</span> ... </td>

再添加一个click() close 上的处理程序span 只是为了关闭。

<span (click)="hideme[i] = false" style="position: absolute; top: 0; right: 0;cursor:pointer;">close</span>

StackBlitz 上的现场演示:https://stackblitz.com/edit/angular-xvwuqz