代码之家 › 专栏 › 技术社区 › A. B

带*ngFor的可折叠列表

materialize typescript angular html

0

A. B · 技术社区 · 8 年前

正如照片中所示,我想要的是,当我单击“显示更多”时,我想要展开此行,并显示其中的所有传感器

我正在使用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>

4 回复 | 直到 8 年前

1

4

Prasanth S 8 年前

您可以使用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;
}

您可以根据需要修改逻辑

2

1

toskv 8 年前

这个 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 .

3

1

Zlatko 8 年前

您可以构建一个只显示特定数量传感器的简单组件,或将其调整为只显示特定高度:

<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

0

Kraken 8 年前

将阵列分成两部分,然后单击 show more 把它们粘起来。看起来没什么大不了的。