Блог

Я новичок в angular, мне нужна помощь.

В моем приложении я получил некоторые данные, используя ответ API. его массив формата объекта. поэтому я использовал *NG для итерации данных. все работает нормально. В данных у меня есть значение под названием электронная почта. поэтому в электронном письме (например. mine@gmail.com), мне нужно показать только имя без «@gmail.com или @yahoo.com» вот так. Я имею в виду, что должен отображаться только на»@». Я попробовал метод разделения, но здесь, в *ngFor, я не знаю, как это использовать.

кто-нибудь, пожалуйста, помогите мне это исправить?

Это мой HTML-код:

 <div *ngFor="let content of listContent.content">
  <p>{{content.email}}</p>
  <p>{{content.name}}</p>
</div>
 

Это мой код ts:

 fetchContents() {
  this.MessagesService.findAll(id).subscribe(data => {
    this.listContent = data;
  });
}
 

перед рендерингом в HTML мне нужно удалить текст, а затем показать его здесь.

В основном вам нужно использовать трубы.

Сначала мы создадим наш пользовательский канал, который будет заряжен удалением доменной части электронной почты.

 import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'removeDomainFromEmail' })
export class RemoveDomainFromEmailPipe implements PipeTransform {
  transform(value: string): string {
     // Do the stuff to remove the domain name in the value
     return value;
  }
}

 

Теперь, когда у вас есть свой собственный канал, вы можете использовать его в остальной части вашего приложения, поэтому, если вы правильно импортируете его в свой компонент, вы сможете использовать его в HTML, как это:

 <div *ngFor="let content of listContent.content">
  <p>{{content.email | removeDomainFromEmail }}</p>
  <p>{{content.name}}</p>
</div>
 

Используя каналы, ваш код будет более масштабируемым и более читаемым.

Ты пробовал это сделать?

 {{content.email.split('@')[0]}}