Ngfor 到数组并通过 ngif 访问

Question

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

这是我运行 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中的特定索引