我有一张表,其中状态列具有来自对象数组的多个值,在这里我只需要显示2个对象,并且悬停在几个点上可以显示所有对象。现在工作正常,但是当对象计数减少时大于2的点将被隐藏。这是下面的我的代码。
<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 >
<span class="status" *ngFor="let item of row.Status | slice:0:2;let j = index">
{{item.name}}
</span><span *ngIf = "i < 2" class="dots" (mouseenter) ="onHover(i)" (mouseleave) ="onHover(-1)">.....</span> <span *ngIf = "i == hoverIndex" class="hover-details"><span *ngFor="let item of row.Status;let j = index">
{{item.name}}
</span></span>
</td>
</tr>
</tbody>
</table>
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
dotsh:any;
hoverIndex:number = -1;
groups:any;
test:any;
constructor(private formBuilder: FormBuilder) {
}
onHover(i:number){
this.hoverIndex = i;
}
columns = ["name", "Items","status"];
ngOnInit() {
this.test = false;
this.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":[{"id":1,"name":"green"},{"id":2,"name":"red"}],"loc":[{"id":1,"name":"loc 2"},{"id":2,"name":"loc 3"}]},{"id":3,"name":"rubbers1","items":"big rubber1","Status":[{"id":1,"name":"green"}],"loc":[{"id":1,"name":"loc 2"},{"id":2,"name":"loc 3"}]}];
}
}
答案 0 :(得分:0)
根据您对点i < 2
使用的条件,点将从第三行开始隐藏。这不是您想要的。相反,如果Status
中的对象数大于1,即使用其length
大于2,则要显示点。
<span *ngIf="row.Status.length > 1" class="dots" (mouseenter)="onHover(i)" (mouseleave)="onHover(-1)">.....</span>