Angular таблица материалов, как отформатировать вывод

Question

Я работаю над модулем Angular и извлекаю данные из веб-API. Я отображаю ответ веб-API в таблице мат. У меня есть список строк, которые я хочу отобразить с разрывом строки. Для этого я форматирую ответ и добавляю теги <span> and <br>. Но вывод также показывает теги <span> and <br>. Вот мой код.

   const data:any=[];

        this.receiveService.get(this._parentLocID).subscribe(
            res => {
                res.forEach( g1=>{
                    let nstatus=[];
                    let newstatus=g1.status;

                      newstatus.forEach(
                        res1=>{

                            nstatus.push('<span>'+res1+'</span>'+'<br>');
                        }
                    );
                 g1.status=nstatus;
                 data.push(g1);       
            });

        const resultData: any = data;
        this.dataSource.data = resultData;

Моя цель проста, я хочу, чтобы значения «завершено», «Выполняется» и «Поставлено в очередь» в отдельных строках.

Answer 1

Я решил это таким образом. Это было намного проще, чем я думал. Я должен был положить * ngIf внутри mat-cell. И для каждого элемента в массиве я ставлю тег "br" в конце каждого элемента.

           <mat-cell  *matCellDef="let element">
                <p class="font-weight-600 text-center" *ngIf="columns.key=='Status'">
                  <span *ngFor="let item of element[columns.value]">
                    {{ item }}
                    <br>
                    </span>
                </p>
                <p class="font-weight-600 text-center" *ngIf="columns.key!='Status'">
                  {{element[columns.value]}}
                 </p>
            </mat-cell>

также я удалил эту часть из файла .ts.

res.forEach( g1=>{
                let nstatus=[];
                let newstatus=g1.status;

                  newstatus.forEach(
                    res1=>{

                        nstatus.push('<span>'+res1+'</span>'+'<br>');
                    }
                );
             g1.status=nstatus;
             data.push(g1);       
        });

так что .ts равен

 this.receiveService.get(this._parentLocID).subscribe(
        res => { 
                const resultData: any = res;
                this.dataSource.data = resultData;
        }

, который решил проблему.

Answer 2

Чтобы связать HTML контент, вы должны использовать свойство [innerHTML], вы можете найти более подробную информацию в этой статье

https://www.google.com/amp/s/blog.fullstacktraining.com/binding-html-with-angular/amp/

Я упал в вашем сценарии вместо построения HTML в машинописном тексте вы можете набрать sh только строковые значения и использовать ngFor в HTML и связать его с {{content}} чем-то подобным, что будет лучшим вариантом.