我有一个表，其数据来自循环，当您单击链接时，这里有一个“单击此处”链接，一个 div 将以绝对位置打开，这个 div 我想用 css 制作引导模式。如果引导程序没问题，那就没问题了。当您按下关闭按钮时，弹出窗口应该像引导程序一样关闭。这是下面的代码
https://stackblitz.com/edit/angular-xvwuqz
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>{{row.Status.length}}-<span (click)="hideme[i] = true" style="border:1px solid;" >Click here</span>
<div style="position:absolute;top:10px;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 (click)="hideme[i] = false" 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 } from '@angular/core';
@Component({
selector: 'my-app',
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"
}]
}
];
}