Во-первых, я предлагаю вам построить канал для разделения получателей:
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'split-recipients'})
export class SplitRecipientsPipe implements PipeTransform {
transform(recipients: string[]) {
return recipients
.split(',')
.filter(Boolean)
.map(r => r.trim());
}
}
Если вы хотите одну строку таблицы (<tr>
) для получателя:
<tr *ngFor="let r of recipients.recipients | split-recipients">
<td>{{r}}</td>
<td style="width: 60px"><button (click)="_delete(r, recipients)">REMOVE</button></td>
</tr>
Если вы хотите сохранить всех получателей в одном элементе <td>
:
<td id="recipients">
<div style="display:flex;justify-content:space-between;width:100%;"
*ngFor="let r of recipients.recipients | split-recipients">
<span>{{r}}</span>
<button (click)="_delete(r, recipients)">REMOVE</button>
</div>
</td>
Относительно метода _delete
, в файле ts
:
/**
* Notice that recipients is the object that contains
* the string recipients, and not the string itself.
*/
_delete(emailToDelete: string, recipients: any) {
const newRecipients = recipients.recipients
.split(',')
.filter(Boolean)
.map(r => r.trim())
.filter(r => r !== emailToDelete)
.join(',');
recipients.recipients = newRecipients;
}