不要列印id以特殊字符開頭的員工

我在 c# 中的 api 將所有員工資訊從資料庫發送到我的網路應用程式（角度）。

我不想在（角度）中列印 id 以“#”開頭的員工。

員工 = 合作者

這是我的角度服務，它呼叫我的 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;
    }))
  }

}

這是我的角度組件： 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>

uj5u.com熱心網友回復：

首先，從 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)
    })
  }

標籤：html 有角度的 angularjs 打字稿 api

上一篇：C#訪問抽象類的屬性

下一篇：通過第3方webhook觸發AWSlambda函式，轉換事件請求正文并將轉換后的正文發布到我的API