如何从 angular 中的插值数据中删除空格

Question

HTML 文件 -

<tr *ngFor="let data of consultant; let id = index">
              <!-- <td>{{ id + 1 }}</td> -->
              <td>{{ data.name }}</td>
              <td *ngFor="let client of allClients; let i = index;">
                <p *ngIf="data.id === client.consultants.id">
                  {{client.name}}{{i === allClients.length - 1 ? '' : ', ' }}
                </p>
              </td>
              <td>{{ data.address }}</td>
              <td>{{ data.email }}</td>
</tr>

问题 ->

problem screenshot

我得到了图片中提到的输出，我不知道如何从这里删除这个白色 space，请帮助我设置我的输出

Answer 1

为了删除客户端名称周围的空格，您可以trim将所有空格组合并为一个空格。您可以使用 replace 方法：client.name.replace(/\s+/g, ' ').trim()。 trim 然后用于删除前导和尾随空格。

在*.component.ts中添加：

public removeWhitespaces(input: string): string {
  return input.replace(/\s+/g, ' ').trim();
}

在*.component.html中使用函数：

<tr *ngFor="let data of consultant; let id = index">
  <!-- <td>{{ id + 1 }}</td> -->
  <td>{{ data.name }}</td>
  <td>
    <ng-container *ngFor="let client of allClients; let i = index;">
      <p *ngIf="data.id === client.consultants.id">
        {{ removeWhitespaces(client.name) }}{{ i === allClients.length - 1 ? '' : ', ' }}
      </p>
    </ng-container>
  </td>
  <td>{{ data.address }}</td>
  <td>{{ data.email }}</td>
</tr>

Answer 2

可能您的 <td> 单元格为空 *ngIf 条件。尝试引入边框以可视化错误。

为避免这种情况，您可以将 *ngFor 包装在 <ng-container> 标签中，并将 *ngIf 条件放在 <td> 标签中。它会避免呈现空 <td>s.

<tr *ngFor="let data of consultant; let id = index">
  <!-- <td>{{ id + 1 }}</td> -->
  <td>{{ data.name }}</td>
  <ng-container *ngFor="let client of allClients; let i = index;">
    <td *ngIf="data.id === client.consultants.id">
      <p>{{client.name}}{{i === allClients.length - 1 ? '' : ', ' }}</p>
    </td>
  </ng-container>
  <td>{{ data.address }}</td>
  <td>{{ data.email }}</td>
</tr>

Answer 3

我认为您不小心创建了一大堆空 <td> 元素。像这样尝试一下，看看它是否更好。这样你就不会在数据不匹配时创建 td 元素

<tr *ngFor="let data of consultant; let id = index">
              <!-- <td>{{ id + 1 }}</td> -->
              <td>{{ data.name }}</td>
              <ng-container *ngFor="let client of allClients; let i = index;">
              <td *ngIf="data.id === client.consultants.id">
                <p>
                  {{client.name}}{{i === allClients.length - 1 ? '' : ', ' }}
                </p>
              </td>
              </ng-container>
              <td>{{ data.address }}</td>
              <td>{{ data.email }}</td>
</tr>

也可能是您只是想在一个 table 单元格中填写所有客户，我会这样做

              <td >
               <ng-container *ngFor="let client of allClients; let i = index;">
                <p *ngIf="data.id === client.consultants.id">
                  {{client.name}}{{i === allClients.length - 1 ? '' : ', ' }}
                </p>
                 </ng-container>
              </td>

如何从 angular 中的插值数据中删除空格

How can I removed white spaces from interpolation data in angular

string-interpolation

removing-whitespace

angular