Ngfor 到数组并通过 ngif 访问

Question

我正在尝试阅读更多有关使用 Angular NgFor 循环创建的 post 的内容。我的数据打印得很好，但我尝试了很多不同的方法让 NgFor 推送到数组或其他东西，这样我就可以点击 post 来显示更多数据它不会全部打开页面上的 post。现在，如果我单击一个 post 以显示更多内容，页面上的所有 post 都会展开以显示更多内容。

这是我的代码片段运行 NgFor 循环和 NgIf。关于如何推送到数组有什么建议吗？

<tr *ngFor="let policy of needs; let i = index">
      <div *ngIf="!this.isInfoVisible">
      <a href="" class="listing-link"  (click)="this.isInfoVisible = true">
      <table class="needs-posting">
      {{i}}

我试图做这样的事情，但只收到错误：

<tr *ngFor="let policy of needs; let i = index; addPost()">
      <div *ngIf="this.isInfoVisible[{{i}}] = false">
      <a href="" class="listing-link"  (click)="this.isInfoVisible[{{i}}] = true">
      <table class="needs-posting">
      {{i}}

与

addPost()
{
     this.isInfoVisible.push(false);
}

我不知道我的概念是否正确，只是语法错误或其他原因。第一次在这里使用 Angular。谢谢！

Answer 1

在您的代码中，您绑定到代码 <div *ngIf="!this.isInfoVisible"> 中的 isInfoVisible，这表示当 isInfoVisible 为 true 时将显示该值。当isInfoVisible转为true时所有内容显示，因为每个内容都绑定到这个

试试下面的方法。在你的 TS 文件中

  isInfoVisible: boolean[] = [false]

在你的html

<tr *ngFor="let policy of needs; let i = index">
      <div *ngIf="!this.isInfoVisible[i]">
      <a href="" class="listing-link"  (click)="this.isInfoVisible[i] = true">
      <table class="needs-posting">
      {{i}}

通过以上，每个项目将绑定到属性 isInfoVisible

中的特定索引

Ngfor 到数组并通过 ngif 访问

Ngfor to array and access via ngif

arrays

angular

typescript

ngfor

angular-ng-if