通过json数组项循环，每次循环一个

ippsafx7 于 2021-09-29 发布在 Java

关注(0)|答案(2)|浏览(335)

我正在使用 ngFor 循环遍历json数组，并用另一个数组显示字典属性的值 ngFor 当前的实现如下所示

<div *ngFor='let item of jsonItems' class="row">
      <div class="col-3">
        ConfidenceLevel: {{item.ConfidenceLevel}}
        <p>
          <button click="markAsSelected()">Select </button>
          <button click="showNextItem()">Show Next</button>
        </p>

      </div>
      <div class="col-9 table-responsive">
        <table class="table  table-bordered">
          <tr *ngFor="let obj of item.DictionaryMaster| keyvalue; let i=index" >
            <ng-container *ngIf="i<2"> //limit to show only 2 items from the list 
              <td *ngFor='let obj1 of obj.value | keyvalue'>
                {{ obj1.value }}
              </td>
            </ng-container>
          </tr>
        </table>
      </div>
      </div>

typescript代码如下所示

jsonItems = [{   
  "ConfidenceLevel": 98.6,
  "Page": 1,
  "DictionaryMaster": {
    "0": {
      "0": "No",
      "1": "94041"
    },
    "1": {
      "0": "Date",
      "1": "08 / 06 / 2020"
    },
    "2": {
      "0": "Due",
      "1": "15 / 06 / 2020"
    },
    "3": {
      "0": " No",
      "1": "113003"
    }
  }
}, { 
  "ConfidenceLevel": 98.56,
  "Page": 1,
  "DictionaryMaster": {
    "0": {
      "0": "Net",
      "1": "\u00a3 212.40"
    },
    "1": {
      "0": "Carriage",
      "1": "\u00a3 0.00"
    },
    "2": {
      "0": "Total  Amount",
      "1": "\u00a3 42.48"
    },
    "3": {
      "0": "Order ",
      "1": "\u00a3 254.88"
    }
  }
}, {
  "CharacterConfidence": 99.72,
  "ConfidenceLevel": 90.26,
  "Page": 1,
  "DictionaryMaster": {
    "0": {
      "0": "Qty  ",
      "1": "  Code",
      "2": "  Description",
      "3": "  Price",
      "4": "  Amount"
    },
    "1": {
      "0": "24",
      "1": "42097805",
      "2": "  Ball  - Red",
      "3": "8.85",
      "4": "212.40"
    },
    "2": {
      "0": "24",
      "1": "42097805",
      "2": "Ball  Red",
      "3": "8.85",
      "4": "212.40"
    },
    "3": {
      "0": "24",
      "1": "42097805",
      "2": " Red",
      "3": "8.85",
      "4": "212.40"
    },
    "4": {
      "0": "24",
      "1": "42097805",
        "2": " - Red",
      "3": "8.85",
      "4": "212.40"
    }
  }
}];

  markAsSelected = function () {
      //not sure how to fetch the selected item with index / 
       some other means }

  showNextItem = function () {

  }

这将把我的json数组中的所有项呈现为当前的一个表。理想情况下，我希望一次渲染一张表。
我们是否可以将ngfor限制为一次显示此列表中的一组项目，并单击按钮“显示下一个项目”的事件

JavaScript Angular angularjs ngfor

来源：https://stackoverflow.com/questions/68133291/loop-through-json-array-items-with-angular-ngfor-one-at-a-time

2条答案

按热度按时间

ds97pgxw1#

你只需要使用 slice 为了你的目标 jsonItems :

<div *ngFor="let item of jsonItems.slice(StartIndex, StartIndex + 1)" class="row">
   ...
</div>

然后在代码中：

StartIndex = 0;
  showNextItem() {
    if (this.StartIndex + 1 < this.jsonItems.length) this.StartIndex++;
  }
  showPreviousItem() {
    if (this.StartIndex > 0) this.StartIndex--;
  }

这是工作样品。
但是你知道如果你想一次展示一件你不需要的东西 ngFor . 您只需要使用对象的当前索引。但我给出了一个解决方案 ngFor 用于可扩展性目的，例如一次显示两个或三个项目或类似的内容。

赞(0）回复(0）举报 2021-09-29

sd2nnvve2#

如果希望一次查看一个，则不需要 *ngFor . 让typescript代码的typescript模块中的变量在0处初始化。定义一个方法来增加 currentIndex . 非常简单的代码只是为了说明方法。

currentIndex = 0;
currentItem = jsonItems[this.currentIndex];
nextItem () {
  this.currentIndex++;
  this.currentItem = this.jsonItems[this.currentIndex];
}

<div (click)="nextItem()">{{ currentItem.ConfidenceLevel }}</div>

或

<div>
  <p>{{ currentItem.ConfidenceLevel }}</p>
  <button (click)="nextItem()">Next</button>
</div>

这将提高视图的渲染速度，因为您没有使用渲染整个阵列 *ngFor . 否则，必须在中渲染整个阵列 divs ，然后使用typescript控制css，以确定哪些已渲染但隐藏 divs 显示。

赞(0）回复(0）举报 2021-09-29

我来回答

通过json数组项循环，每次循环一个

2条答案

相关问题

热门标签

最新问答