Question

当它在照片中看到，我想要的是，当我点击显示更多时，我想展开这一行，并向我展示所有传感器

我正在使用materialize，我的代码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>

Answer 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>

TS

value:number = 2;

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

您可以根据需要修改逻辑

Answer 2

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

<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一个完整的例子。

Answer 3

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() {

  }
}

工作人员here。

Answer 4

将您的阵列分成两部分，然后点击show more连接它们。似乎没什么大不了的。

带有* ngFor的可折叠列表

4 个答案: