Question

我从服务器获得JSON响应，如下所示： HTTP GET ：

{
    searchType: "search_1",
    overview: [
                "Bed",
                "BedSheets",
                "BedLinen",
                 ..
              ]
}

根据关键字，数组overview会有所不同。

我将每个搜索到的关键字及其响应存储在名为Output的数组中，如下所示：

[
    {kw: keyword1, resp: {aboveMentioned JSON response},
    {kw: keyword2, resp: {other JSON response with varying elements in `overview` array}
]

在我的component.html文件中，我想将overview数组中的条目显示为按钮。

<ul>
  <li *ngFor="let eachOutput of Output">
    <div *ngFor="let each of eachOutput.resp.overview">
      <button *ngIf="eachOutput.resp.overview.length >=1">{{each}}</button>
    </div> <!-- TRY TO SHOW JUST THE FIRST ELEMENT but how? -->
    <!--- Try to display the other buttons with some option like 'More'
      next to the first button -->
  </li>
</ul>

目前，有一些关键字，其中数组的元素数量很大，但我想只显示overview[0]作为按钮，类似More Options这样的文字，点击后显示overview的其他元素。

这里ngFor和ngIf的正确用法是什么？我听说Angular 2不鼓励使用hidden CSS属性。

Answer 1

您可以使用*ngFor循环中的索引来标识第一个元素。使用一组布尔值，您可以存储应该查看哪些按钮的状态。

component.ts（实现OnInit）

(...)
@Input() Output: any[] = [];
showMore: boolean[] = [];

ngOnInit() {
  this.showMore = new Array(this.Output.length);
  this.showMore.fill(false);
}
(...)

component.html

<ul>
  <li *ngFor="let eachOutput of Output; let outerIndex = index">
    <div *ngFor="let each of eachOutput.resp.overview; let index = index">
      <button *ngIf="index === 0 || showMore[outerIndex]">{{each}}</button>
    </div>
    <button *ngIf="eachOutput.resp.overview.length > 1" 
      (click)="showMore[outerIndex]=!showMore[outerIndex]">
        {{showMore[outerIndex] ? 'Hide' : 'Show'}} more Buttons
    </button>
  </li>
</ul>

Answer 2

我更喜欢将任何远程复杂逻辑保留在我的模板之外，所以我会采用不同的方法 - 将响应对象拆分为第一个主要对象，然后是一个数组剩余的辅助对象，如果标志值为true，则显示。

这使您的模板易于编码 - 更重要的是（在我看来），易于阅读和理解编辑代码的任何人。

这可能类似于：

[
 {kw: keyword1, response: {primaryResponse: 'Bed', secondaryItems: {bedlinen, pillows}},
 {kw: keyword2, response: {primaryResponse: 'Door', secondaryItems: {window, handle}}
]

<ul>
  <li *ngFor="let eachOutput of Output">
    <button *ngIf="eachOutput.response.primaryResponse">
      {{eachOutput.response.primaryResponse}}</button>

    <button (click)="ToggleSecondaryItems()">More</button>

    <div *ngIf="showSecondaryItems">
      <div *ngFor="let each of eachOutput.response.secondaryItems">
        <button *ngIf="each.overview.length > 0">{{each}}</button>
      </div>
    <//div>    
  </li>
</ul>

*我没有对此进行测试，因此代码中可能存在一些错误 - 但我希望它能显示出基本的想法。

抑制数组的大多数元素，但是Angular 2中的JSON Response中的元素

2 个答案:

component.ts（实现OnInit）

component.html