Как я могу отделить данные от одной строки - PullRequest
0 голосов
/ 02 мая 2020

У меня есть простой Объект, который я получаю таким образом:

  getSelectedRecipients(event) {
    this.aliasesService.getRecipients(event.nr)
    .subscribe(
      res => {
        this.recipients = res;
        this.isVisible = true;
      },
      err => console.error(err)
    );
  }

и вывод

this.recipients

:

{
recipients:
"one@domain.com,↵
two@domain.com,↵
three@domain.com,↵
four@domain.com
"}

Теперь я хочу разделить эти данные в моей таблице. Теперь я попал внутрь что-то вроде

<td id="recipients">
{{recipients.recipients }}
</td>

и это похоже на: one@domain.com, two@domain.com ... four@domain.com [button]

Но моя точка зрения такова:

one@domain.com [button]
two@domain.com [button]
.
.
.
four@domain.com [button]

Как я могу отделить это? Я хочу это для обновления запроса (на следующем шаге), чтобы пользователь мог удалить, например, только three@domain.com вместо всех получателей.

Ответы [ 4 ]

3 голосов
/ 02 мая 2020

Во-первых, я предлагаю вам построить канал для разделения получателей:

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;
}
0 голосов
/ 02 мая 2020
#recipients {
   white-space: pre-line;
}

По сути, этот вопрос дублирует отображение Angular 4 в следующей строке для символа новой строки для тега p

0 голосов
/ 02 мая 2020

Вы можете взять свой recipients.recipients и разделить его с помощью .split () на то, что кажется символом делителя ,, а затем перейти к использованию Angular ngFor * Атрибут 1006 * для отображения вашего массива.

const recipientsArray = recipients.recipients.split(',')

<td *ngFor="let recipient of recipientsArray">
{{recipient }}
</td>
0 голосов
/ 02 мая 2020

Используйте split("\n"), чтобы разделить строку на newline. и используйте ngFor l oop.

class A {
  getSelectedRecipients(event) {
    this.aliasesService.getRecipients(event.nr).subscribe(
      (res) => {
        this.recipients = res.recipients.split("\n");
        this.isVisible = true;
      },
      (err) => console.error(err)
    );
  }
}
<td id="recipients" *ngFor="let recipient of recipients">
{{recipient}}
</td>

Пример обновления для logi c:

const recipients = [
  "user1",
  "user2",
  "user3",
  "user4",
]
let deletedUsers = []
const deleteUser = (user) => deletedUsers.push(user)

const listUsers = () => {
  return recipients.filter(user => deletedUsers.indexOf(user) === -1)
}
console.log(listUsers()) // [ 'user1', 'user2', 'user3', 'user4' ]
deleteUser("user2")
console.log(listUsers()) // [ 'user1', 'user3', 'user4' ]
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...