*ngFor 的可折叠列表答案

【问题标题】：collapsible lists with *ngFor*ngFor 的可折叠列表
【发布时间】：2018-02-23 09:52:57
【问题描述】：

正如照片中所示，我想要的是，当我点击显示更多时，我想展开这一行，并显示那里的所有传感器

我正在使用物化，我的代码 html 是：

    <table class="bordered table-bordered" [mfData]="homeboxsp | dataFilter : filterQuery" #mf="mfDataTable" [mfRowsOnPage]="rowsOnPage"
        [(mfSortBy)]="sortBy" [(mfSortOrder)]="sortOrder">
        <thead style="color:black; background:rgb(207, 235, 245);border:1px solid rgb(190, 190, 190);">
          <tr>
            <th>
              <mfDefaultSorter by="client">Client</mfDefaultSorter>
            </th>
             <th>
              <mfDefaultSorter by="description">Homebox</mfDefaultSorter>
            </th>
 <th>
              <mfDefaultSorter by="sensors">Sensors</mfDefaultSorter>
            </th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let item of homeboxsp">
            <td>{{item.client}}</td>
                <td>{{item.description}}</td>
                    <td>
              <ul>
                <ul *ngFor="let sensor of item.sensors">
                  <li>{{sensor.sensor_serial}}</li>
                </ul>
              </ul>
            </td>
                     </tr>
        </tbody>
      </table>

【问题讨论】：

你能澄清一下：你想在那里扩展表格行吗？
是的。当我点击显示更多时，我想展开这一行，并显示那里的所有传感器

标签： html angular typescript materialize

【解决方案1】：

您可以使用 ngIf 以简单的方式完成此操作

<ul *ngFor="let sensor of item.sensors;let i = index;">
   <li *ngIf="i < value">{{sensor.sensor_serial}}</li>
   <button (click)="showmore()">showmore</button>
</ul>

value:number = 2;

showmore(){
let value = this.value;
this.value= value+1;
}

您可以根据需要修改逻辑

【讨论】：

这段代码，每次点击时只显示所有行中的一个传感器，而不是单击时显示一行中的所有传感器。
检查更新stackblitz

【解决方案2】：

SlicePipe 非常适合这种情况。它与接受的答案几乎相同，需要更少的 *ngIf。

@Component({
  selector: 'my-app',
  template: `
    <div>
      <div *ngFor="let val of values | slice:0:visible">{{val}}</div>
      <div *ngIf="visible==3" (click)="visible=values.length">show more</div>
      <div *ngIf="visible==values.length" (click)="visible=3">show less</div>
    </div>
  `,
})
export class App {

  visible= 3;
  values = [1, 2,3,4, 5,6,7,8,9]
  constructor() {

  }
}

您可以看到一个工作示例here。

如果您想拥有多个展开的列表，同样的原则也适用。您只需要分别控制每个列表的可见性。

这是一个例子。

@Component({
  selector: 'my-app',
  template: `
    <div>
      <div *ngFor="let group of groups">
        <div>{{group.name}}</div>
        <div *ngFor="let val of group.values | slice:0:(group.expanded? group.values.length :3)">{{val}}</div>
        <div *ngIf="!group.expanded" (click)="group.expanded=true">show more</div>
        <div *ngIf="group.expanded" (click)="group.expanded=false">show less</div>
      </div>      
    </div>
  `,
})
export class App {

  groups = [{name: 'a', values: [1, 2,3,4, 5,6,7,8,9]},{name: 'b', values: [1, 2,3,4, 5,6,7,8,9]}]
  constructor() {

  }
}

还有工作的 plnkr here。

【讨论】：

是的，谢谢，这很好。但是当我有一些行时我有一个问题。例如，当我在第 1 行单击显示更多时，在所有行中显示更多传感器。如何仅在一行中选择并显示所有传感器？谢谢
非常感谢！效果很好。 :)

【解决方案3】：

您可以构建一个简单的组件来只显示一定数量的传感器，或者调整它以只显示一定的高度：

<td><values-display-cmp [values]="row"></values-display-cmp></td>

然后是组件：

@Component({
  selector: 'values-display-cmp',
  template: `
  <ul>
    <li *ngFor="let val of shownValues">{{val}}</li>    
  </ul>
  <a href="#" class="action" *ngIf="!open" (click)="more()">More</a>
  `

})
export class ValuesDisplayComponent {  
  @Input() set values(values) {
    this._values = values;
    this.shownValues = values.slice(0, 2);

  };
  open = false;
  shownValues = [];
  _values = [];

  more() {
    this.open = true;
    this.shownValues = this._values;
  }
}

Here's 一个完整的例子。

【讨论】：

【解决方案4】：

将您的数组分成两部分，然后单击show more 将它们连接起来。好像没什么大不了的。

【讨论】：