Angular Mat-Table按列值排序大于或小于

时间:2019-11-09 22:11:11

标签: javascript angular angular8 mat-table

我正在尝试对垫子表进行排序。该数组只是来自api的响应。

@ViewChild("MatSortstash", { static: false }) sortstash: MatSort;
 @ViewChild("paginatorstash", { static: false })
  paginatorstash: MatPaginator;

 fullstashDataResponseSource = new MatTableDataSource();

        if (resp3) {
          for (let x = 0; x < resp3.length; x++) {
            // console.log(resp3[x].data.items);
            if (resp3[x].data.items) {
              bigboyarray2.push(resp3[x].data.items);
            }
          }
        }
        let bigarrayconcat = [].concat(bigboyarray2);
        let biggestitemarrayever = [];
        for (var i = 0; i < bigarrayconcat.length; ++i) {
          for (var j = 0; j < bigarrayconcat[i].length; ++j)
            biggestitemarrayever.push(bigarrayconcat[i][j]);
        }
        this.fullstashdataBigBoiArray = biggestitemarrayever;


 this.fullstashDataResponseSource = new MatTableDataSource(
          this.fullstashdataBigBoiArray
        );
this.fullstashDataResponseSource.sort = this.sortstash;

这是HTML


<mat-tab-group [animationDuration]="'0ms'">
  <mat-tab label="Stash">
<div class="example-container1 mat-elevation-z8">
<ng-container *ngIf="fullstashDataResponseSource" >
  <div>{{networth}} <img class="img-responsive smaller"
    src="https://web.poecdn.com/image/Art/2DItems/Currency/CurrencyRerollRare.png" /> Net Worth</div>

<br>
<mat-form-field>
  <input matInput (keyup)="applyFilterStash($event.target.value)" placeholder="Filter">
</mat-form-field>

<!-- <mat-form-field>
  <input matInput (keyup)="applyFilterCurrencyCuttoff($event.target.value)" placeholder="Currency Cuttoff">
</mat-form-field>
  -->
    <table mat-table [dataSource]="fullstashDataResponseSource" #MatSortstash="matSort" matSort  class="w-100">
      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef mat-sort-header >Name</th>
        <td mat-cell *matCellDef="let element">
          <ng-container *ngIf="element.name || element.typeLine">
{{element.name ? element.name : element.typeLine}}
          </ng-container>

        </td>
      </ng-container>

      <ng-container matColumnDef="stackSize">
        <th mat-header-cell *matHeaderCellDef mat-sort-header >Count</th>
        <td mat-cell *matCellDef="let element" >
            {{element.stackSize}}
        </td>
      </ng-container>

      <ng-container matColumnDef="icon">
        <th mat-header-cell *matHeaderCellDef >Icon</th>
        <td mat-cell *matCellDef="let element">
            <ng-template #testtooltip3>
              <ul *ngFor="let item of element.explicitMods"> {{item}}</ul>
            </ng-template>
            <button mat-button [ngbTooltip]="testtooltip3">
                <img [src]="element.icon" />
              </button>
        </td>
      </ng-container>

      <ng-container matColumnDef="inventoryId">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Stash</th>
        <td mat-cell *matCellDef="let element" >
          {{ element.inventoryId }}
        </td>
      </ng-container>
      <ng-container matColumnDef="worth">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Worth</th>
<td mat-cell *matCellDef="let element">
<!-- {{worthfinder(element)}} -->
   <!-- {{element.worth}}  <img  src="https://web.poecdn.com/image/Art/2DItems/Currency/CurrencyRerollRare.png?scale=1&w=1&h=1"  style="height:10%;" /> -->
    {{element.worth}} <img 
      src="https://web.poecdn.com/image/Art/2DItems/Currency/CurrencyRerollRare.png?scale=1&w=1&h=1" />
</td>

      </ng-container>

      <tr mat-header-row *matHeaderRowDef="disptest; sticky: true "></tr>
      <tr mat-row *matRowDef="let row; columns: disptest"></tr>
    </table>
        <mat-paginator #paginatorstash [length]="100" [pageSize]="10" [pageSizeOptions]="[5, 10, 25, 100]">
        </mat-paginator>

  </ng-container>
  </div>
</mat-tab>

我要排序的是“价值”列。我有一个区域worthfinder(element),它将项目与另一个数组进行比较,并将价值附加到它上面。这一切都很好。我什至有一个过滤器已经在工作。

  applyFilter(filterValue: string) {
    this.currenttablesource.filter = filterValue.trim().toLowerCase();
    // console.log(this.currenttablesource);
  }
  applyFilterStash(filterValue: string) {
    this.fullstashDataResponseSource.filter = filterValue.trim().toLowerCase();
    // console.log(this.currenttablesource);
  }

但是我想设置项目的截止时间而不自己从数组中删除它们,如果element.worth又名(fullstashdataBigBoiArray [itemindex] .worth),则将其隐藏 我不想这样删除项目。

for (let x=0;x<this.fullstashdataBigBoiArray.length;x++){

if (this.fullstashdataBigBoiArray[x].worth<5){
delete this.fullstashdataBigBoiArray[x]
}

}

0 个答案:

没有答案