Мой API в С# отправляет всю информацию о сотрудниках из базы данных в мое веб-приложение (угловое).
Я хочу не печатать (угловые) сотрудников, чей идентификатор начинается с «#».
Сотрудник = сотрудник
Вот мой угловой сервис, который вызывает мой 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-часть использует библиотеку кендо и его сетку для отображения сотрудников в сетке.
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.info(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>
Метод Array.filter()!
Во-первых, это не ваша работа фильтровать данные из API (плохая производительность, потому что вы получаете много информации впустую).
Вы можете использовать функцию фильтра (или прямо в своем шаблоне).
getAllCollaborateur(){
this.api.getAllCollaborateurs()
.subscribe(res=>{
this.collaborateurData = res.filter((item) => item.Id.toLowerCase().indexOf('#') !== 0);
console.info(this.collaborateurData);
})
}
Для # и $ :
getAllCollaborateur(){
this.api.getAllCollaborateurs()
.subscribe(res=>{
this.collaborateurData = res.filter((item) => item.Id.toLowerCase().indexOf('#') !== 0 && item.Id.toLowerCase().indexOf('$');
console.info(this.collaborateurData)
})
}
Спасибо за ваш ответ, я также добавляю это в свой код: this.collaborateurData = res.filter((item:any) => item.toLowerCase().indexOf('#') !== 0); и напечатайте мне эту ошибку: ERROR TypeError: item.toLowerCase не является функцией
Потому что я забыл .Id. я обновляю свой ответ
Это работает отлично, спасибо. Как я могу добавить символ $, я пробовал: this.collaborateurData = res.filter((item) => item.Id.toLowerCase().indexOf('#', '$') !== 0); но это не работает.
Я добавляю решение в свой ответ.
Вместо того, чтобы просто назначать его
this.collaborateurData = res
, вы можете вызвать функцию, которая отфильтрует все нежелательные данные в самом компоненте.