html - 如何在 Angular 7 中使用 ngFor 在单击关闭按钮时单独隐藏 div
问题描述
我有一个表,其数据来自循环。在这里,当我单击状态列的“单击此处”时,将显示一个 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>
app.component.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"
}]
}
];
}
解决方案
现在您只使用一个(click)
处理程序来打开和关闭。您必须将这两个操作分开。
卸下您的(click)
处理程序<td>
并将其放在Click Here
跨度上以供打开。
<td>{{row.Status.length}}-<span (click)="hideme[i] = true" style="border:1px solid;" >Click here</span> ... </td>
在 span 上添加另一个click()
处理程序close
只是为了关闭。
<span (click)="hideme[i] = false" style="position: absolute; top: 0; right: 0;cursor:pointer;">close</span>
StackBlitz 上的现场演示:https ://stackblitz.com/edit/angular-xvwuqz
推荐阅读
- git - 通过cmd更新git?
- node.js - Gulp 在第一个 XHR 请求时崩溃并出现 HPE_INVALID_CONSTANT 错误
- php - 优化PHPExcel和脚本加载文件
- odata - OData 遏制
- mysql - 存储过程中的 MySQL 1064 语法错误
- keras - CNN多类网络
- r - 如何将带有字符串的表格变成R中的向量列表?
- django - 打开模型项“编辑/更改”页面时如何自动修改 django 模型对象的值?
- r - r + hpc + git 问题:为参数列表提交具有不同值的多个作业
- google-chrome - requestFullscreen 在消息事件处理程序中不再起作用