Не печатать сотрудника, чей идентификатор начинается со специальных символов

Мой 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>

Вместо того, чтобы просто назначать его this.collaborateurData = res, вы можете вызвать функцию, которая отфильтрует все нежелательные данные в самом компоненте.

cloned 16.03.2022 09:48

Метод Array.filter()!

Will Alexander 16.03.2022 09:49
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
1
2
39
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Во-первых, это не ваша работа фильтровать данные из 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 не является функцией

Kylian19 16.03.2022 10:01

Потому что я забыл .Id. я обновляю свой ответ

Pterrat 16.03.2022 10:02

Это работает отлично, спасибо. Как я могу добавить символ $, я пробовал: this.collaborateurData = res.filter((item) => item.Id.toLowerCase().indexOf('#', '$') !== 0); но это не работает.

Kylian19 16.03.2022 10:09

Я добавляю решение в свой ответ.

Pterrat 16.03.2022 10:15

Другие вопросы по теме