Блог

Главная - Вопросы по программированию - Остановите Angular 12 от замены пробелов символами

Остановите Angular 12 от замены пробелов символами

#angular

Вопрос:

Как остановить замену символа пробела на Угловой 12 amp;nbsp; ? Это вызывает проблемы с разрывами строк, как amp;nbsp; и, очевидно, неразрывный пробел.

Например, когда я визуализирую свой компонент, строка "This is an example string." заменяется на "Thisamp;nbsp;isamp;nbsp;anamp;nbsp;exampleamp;nbsp;string."

Вот мое приложение компонента-card.component.ts:

 import { Component, Input, OnInit } from '@angular/core';
import { Application } from 'src/app/services/apps.service';

@Component({
  selector: 'app-application-card',
  templateUrl: './application-card.component.html',
  styleUrls: ['./application-card.component.css']
})
export class ApplicationCardComponent implements OnInit {

  @Input() application: Application;

  constructor() { }

  ngOnInit(): void {
    // this outputs "This is an example string." as expected
    console.log(this.application.description);
  }

}

Объект «приложение» передается компоненту с помощью:

       <app-application-card *ngFor="let application of getApplicationsFiltered()" [application]="application"></app-application-card>

application-card.component.html:

 <div class="app-card-body">
  {{application.description}}
</div>

^ Это то, что я ожидаю увидеть "<div class="app-card-body">This is an example string.</div>" , но вместо этого получаю "<div class="app-card-body">Thisamp;nbsp;isamp;nbsp;anamp;nbsp;exampleamp;nbsp;string.</div> »

Определение сферы применения:

  export interface Application {
  id: string;
  name: string;
  description: string;
  image: string;
  suggested: boolean;
  active: boolean;
  url: string;
  helpdesk_url: string;
}

Я не знаю, как остановить это поведение. Я хотел бы {{заявление.описание}} для выделения "This is an example string." без amp;nbsp; вставки управляющих символов. Любая помощь в понимании того, как остановить такое поведение, была бы весьма признательна.

Комментарии:

1. В каком браузере это происходит?

2. Google Chrome 93, Microsoft Edge 93 и Mozilla Firefox 91

3. Откуда берется этот объект приложения? Может быть, вы могли бы воспроизвести это в Стакблице ? Таким образом, нам будет легче помочь вам.

4. @H3AR7B3A7, я создал Стекблитц и, конечно же, не воспроизвел. Теперь я понял, что на самом деле это не имеет никакого отношения к Angular, по какой-то причине веб-сервер C# (Kestral) переписывает «Это строка примера». как «Эта строка является примером». в его выводе сериализатора JSON даже через входную строку 100% просто обычное пространство. u00A0, конечно, не является символом пробела, поэтому Angular делает именно то, что должен. Извините за погоню за дикими гусями и спасибо вам за вашу помощь.

5. @H3AR7B3A7 — и именно ваш комментарий «Откуда берется этот объект приложения?» заставил меня задуматься о том, чтобы очень внимательно посмотреть на вывод JSON, так что большое вам спасибо.

Ответ №1:

Создать Трубу: replace-spaces.pipe.ts 

 import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'replacespaces' })
export class ReplaceSpacesPipe implements PipeTransform {
  transform(value: string): string {
    return value.replace(/amp;nbsp;/g, ' ');
  }
}

Объявить ReplaceSpacesPipe в модуле, в котором ApplicationCardComponent объявлено

 declarations: [ApplicationCardComponent, ReplaceSpacesPipe]

И в шаблоне:

 <div class="app-card-body">
  {{application.description | replacespaces}}
</div>

ДЕМОНСТРАЦИЯ

Метки: