不要打印 ID 以特殊字符开头的员工

Question

我的 api 在 c# 中将所有员工信息从数据库发送到我的网络应用程序 (angular)。

我不想在 (angular) 中打印 ID 以“#”开头的员工。

员工=合作者

这是我的 angular 服务，它调用我的 api 来检索信息：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs/operators';
import { environment } from 'src/environments/environment';

@Injectable({
  providedIn: 'root'
})
export class ApiService {

  localUrlAPI: string = environment.urlAPI;

  constructor(private _http : HttpClient) { }

  getAllCollaborateurs(){
    return this._http.get<any>(this.localUrlAPI+"/annuaire/GetAnnuaire")
    .pipe(map((res:any)=>{
      return res.Data;
    }))
  }

}

这是我的 angular 组件： html 部分使用 kendo 库和他的网格将员工显示到网格中

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { ApiService } from 'src/app/services/api.service';

@Component({
  selector: 'app-grid',
  templateUrl: './grid.component.html',
  styleUrls: ['./grid.component.scss']
})
export class GridComponent implements OnInit {

  collaborateurData !: any[];
  public format = "dd/MM/yyyy";

  constructor(private api: ApiService, private router: Router, private activatedRoute: ActivatedRoute) { }

  ngOnInit(): void {
    this.getAllCollaborateur();
  }

  getAllCollaborateur(){
    this.api.getAllCollaborateurs()
    .subscribe(res=>{
      this.collaborateurData = res;
      console.log(this.collaborateurData)
    })
  }

}

<kendo-grid [kendoGridBinding]="collaborateurData" [filterable]="true" [resizable]="true" [sortable]="true" [pageable]=true [pageSize]="15" class="table">
  
  <!-- Column Id -->
  <kendo-grid-column field="Id" title="Matricule" [headerStyle]="{'background-color': '#082d61', 'color': '#ffffff', 'font-weight': 'bold'}">
    <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
      <kendo-grid-string-filter-cell [column]="column" [filter]="filter" [showOperators]="false">
      </kendo-grid-string-filter-cell>
    </ng-template>
    <ng-template kendoGridCellTemplate let-collaborateur>
      <div *ngIf="collaborateur.TypeSalarie === 'A'">
        <a [routerLink]="['/salarie/',collaborateur.Id]">{{ collaborateur.Id }}</a>
      </div>
      <div *ngIf="collaborateur.TypeSalarie === 'I'">
        <a [routerLink]="['/interimaire/',collaborateur.Id]">{{ collaborateur.Id }}</a>
      </div>
      <div *ngIf="collaborateur.TypeSalarie === 'P'">
        <a [routerLink]="['/prestataire/',collaborateur.Id]">{{ collaborateur.Id }}</a>
      </div>
    </ng-template>
  </kendo-grid-column>
  
</kendo-grid>

Answer 1

首先，过滤来自 API 的数据不是你的工作（表现不佳，因为你白白收到了很多信息）。

您可以使用过滤器功能（或直接在模板中使用管道）。

  getAllCollaborateur(){
    this.api.getAllCollaborateurs()
    .subscribe(res=>{
      this.collaborateurData = res.filter((item) => item.Id.toLowerCase().indexOf('#') !== 0);
      console.log(this.collaborateurData);
    })
  }

# 和 $ :

  getAllCollaborateur(){
    this.api.getAllCollaborateurs()
    .subscribe(res=>{
      this.collaborateurData = res.filter((item) => item.Id.toLowerCase().indexOf('#') !== 0 && item.Id.toLowerCase().indexOf('$');
      console.log(this.collaborateurData)
    })
  }

不要打印 ID 以特殊字符开头的员工

Don't print employee who id start with special characters

html

angular

angularjs

typescript

api