HTML <option>с использованием пробелов Angular 6+

Question

У нас есть список значений, возвращаемых сервером. Эти значения содержат такие слова:

«1 черный»
«1/2 недоступно»
«3 небесно-голубых»

Код angular выглядит следующим образом: <select class="someclass" [(ngModel)]="colorChoice"> <option *ngFor="let c of colorList" [ngValue]="c">{{c}}</option> </select> Так как в приведенном выше примере началось удаление всех пробелов между словами, кроме одного пробела между ними.
Что-то вроде «1 Black».
Поэтому я прибег к использованию '' в коде после получения значений из сервер. let tmp = respColorList.replace(/\s/g, ' '); this.colorList.push(tmp); Теперь в раскрывающемся списке отображается "". Я также пробовал white-space: pre;, а также word-spacing: 5px;

Как мне решить эту проблему. Спасибо.

Answer 1

В значениях, возвращаемых сервером, вставляйте не HTML сущность  , а (эквивалент) строковый код символа \xa0. например, "3\xa0\xa0\xa0\xa0\xa0\xa0Sky Blue". (См. Также Как неразрывный пробел представлен в строке JavaScript? )

Я проверил, указав следующее свойство элемента в компоненте:

colorList = [
   "1      Black",
   "1/2    Unavailable",
   "3\xa0\xa0\xa0\xa0\xa0\xa0Sky Blue" ,
];

Когда вы связываете это с помощью предоставленного вами кода шаблона HTML, я получаю поле выбора с несколькими пробелами в третьем варианте между словами. См. Прикрепленное изображение. Проверено в Chrome и Firefox.