如何在保存先前值的情况下将对象渲染为 HTML？

Question

我有以下数据结构，我试图在单击时单独渲染每个对象，whiteout 用当前值覆盖以前的值。

boardCollection =
        [
          {
            id: 1,
            dashboardType: "Simple",
            fields: [
              "Board naspa",
              "Cea mai mare mica descriere"
            ]
          },
          {
            id: 2,
            dashboardType: "Simple",
            fields: ["Titlu fara idei", "Descriere in speranta ca se va afisa"]
          },
          {
            id: 3,
            dashboardType: "Complex",
            fields: ["Primu board complex", "descriere dorel", "Hai ca merge cu chiu cu vai"]
          },
          {
            id: 4,
            dashboardType: "Complex",
            fields: ["Kaufland", " merge si asta ", "aaaaaaaaaaaaaaaaaaaaaaaaaa"]
          }
        ]

其中我以下列方式访问元素 ->value/index 是全局定义的。

 display() {
    let currentElement = this.boardCollection[this.index]
    this.value = currentElement;
    if (this.index < this.boardCollection.length - 1) {
      this.index++;
    } else {
      this.index = 0;
    }    
  }

这是 HTML 以及我尝试渲染每个对象的方式。

<div *ngIf="show">
  <h1>{{value.dashboardType}}</h1>
  <ol *ngFor="let prop of value.fields |keyvalue">
    <li>{{prop.value }}</li>
  </ol>
</div>

<button (click)="display()">Show</button>

显示方式中show设置为true

到目前为止我所取得的成就是显示每个对象或它们的属性，但是每次按下按钮时，当前值都会覆盖以前的值，因此我正在寻找一些帮助来保存前一个值，以便显示每个对象，所以最后将数组中的所有对象渲染到 UI

Answer 1

我会在 TypeScript 中有另一个数组，并在单击显示时继续添加到这个数组。

boards = [];
...
display(index: number) {
    let currentElement = this.boardCollection[this.index]
    this.value = currentElement; // might not be needed
    this.boards = [...this.boards, ...currentElement]; // append to this.boards immutably so change detection takes effect (this.boards.push won't force change detection)
    
    if (this.index < this.boardCollection.length - 1) {
      this.index++;
    } else {
      this.index = 0;
    }    
  }
...
<div *ngFor="let board of boards>"
  <h1>{{board.dashboardType}}</h1>
  <ol *ngFor="let prop of board.fields |keyvalue">
    <li>{{prop.value }}</li>
  </ol>
</div>

<button (click)="display()">Show</button>

每次点击Show应该会一直一一显示。

如何在保存先前值的情况下将对象渲染为 HTML？

How can I render objects to HTML with saving the previous value?

javascript

arrays

loops

nested-loops

angular