Warm tip: This article is reproduced from serverfault.com, please click

angular-Ngfor数组并通过ngif访问

(angular - Ngfor to array and access via ngif)

发布于 2020-11-28 07:39:55

我想基本上了解使用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。谢谢!

Questioner
Connor Thomas
Viewed
11
Owen Kelvin 2020-11-28 23:39:35

在你要绑定isInfoVisible的代码中,<div *ngIf="!this.isInfoVisible">这表示该值将在isInfoVisibleis时显示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