如何为表格行创建自定义管道？

问题描述

我想创建一个自定义管道来呈现包含特定数据的表中的行。

如果你按照图片—— 通过单击起点 I 按钮，它将仅显示具有起点值的行 - 起点 II 和 III 的“一”相同。

谁能帮我写自定义管道？

Table image

src\app\book-ride\book-ride.component.html

<div style="position: relative">
    <div class="btn-group mr-2" role="group" aria-label="First group">
      <button type="button" class="btn btn-secondary" (click)="onClick()">Show all rides</button>
    </div>

    <div *ngIf = "showButton"class="btn-group mr-2" role="group" aria-label="Third group">
      <button type="button" class="btn btn-secondary">Start Point I</button>
    </div>

    <div *ngIf = "showButton" class="btn-group mr-2" role="group" aria-label="Fourth group">
      <button type="button" class="btn btn-secondary">Start Point II</button>
    </div>

    <div *ngIf = "showButton" class="btn-group mr-2" role="group" aria-label="Fifth group">
      <button type="button" class="btn btn-secondary">Start Point III</button>
    </div>

    <div style="position: relative" *ngIf="clicked">

      <table mat-table [dataSource]="data" class="mat-elevation-z8">

        <ng-container matColumnDef="Start_Point">
          <th mat-header-cell *matHeaderCellDef> Start point </th>
          <td mat-cell *matCellDef="let data"> {{data}} </td>
        </ng-container>

        <ng-container matColumnDef="End_Point" appMouseHover>
          <th mat-header-cell *matHeaderCellDef>End point</th>
          <td mat-cell *matCellDef="let index = index"> {{index}} </td>
        </ng-container>

        <ng-container  matColumnDef="Seats_available" appMouseHover>
          <th  mat-header-cell *matHeaderCellDef> Seats available</th>
          <td mat-cell *matCellDef="let count = count"> {{count}} </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr appMouseHover mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
      </table>
    </div>

    <div class="btn-group mr-2" role="group" aria-label="Second group">
      <button type="button" class="btn btn-secondary">Offer a ride</button>
    </div>

 </div>

src\app\book-ride\book-ride.component.ts

import { Component,OnInit } from '@angular/core';

@Component({
  selector: 'app-book-ride',templateUrl: './book-ride.component.html',styleUrls: ['./book-ride.component.css']
})
export class BookRideComponent implements OnInit {

  clicked: Boolean = false;
  showButton: Boolean = false;
  constructor() { }

  displayedColumns: string[] = ['Start_Point','End_Point','Seats_available'];
  data: string[] = ['one','two','three'];

  ngOnInit(): void {
  }

  onClick(){
    this.clicked = ! this.clicked;
    this.showButton = ! this.showButton
  }

}

我尝试创建这个管道，但没有工作

src\app\start-pipe.pipe.ts

import { Pipe,PipeTransform } from '@angular/core';
import { BookRideComponent } from './book-ride/book-ride.component';
import { Users } from './login/users';

@Pipe({
  name: 'startPipe'
})
export class StartPipePipe implements PipeTransform {

  bookRideComponent: BookRideComponent = new BookRideComponent;
  user: Users = new Users;

  transform(value: unkNown,arg : String): unkNown {

    console.log("inside pipe: "+arg);

    if (arg == "one"){
      this.user.click2 = false;
      this.user.click3 = false;
    }
    else if(arg == "two"){
      this.user.click1 = false;
      this.user.click3 = false;
    }
    else if(arg == "three"){
      this.user.click1 = false;
      this.user.click2 = false;
    }
    else
    this.user.click1 = true;
    this.user.click2 = true;
    this.user.click3 = true;


    return null;
  }

}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）