添加或隱藏分隔符的正確簡潔方法-有解無憂

我需要在頁面的頁腳中顯示一些欄位，如下所示：添加或隱藏分隔符的正確簡潔方法

每個欄位可以包含或不包含在頁腳中。當此資訊是動態的時，問題是分隔符。要添加或洗掉分隔符，我會檢查下一個 html 元素是否帶有 > 0 的字串，但我最終得到了一個最終不起作用的巨大驗證。添加或隱藏分隔符的正確簡潔方法

有什么更好的方法來處理這個問題？

uj5u.com熱心網友回復：

我認為這對您的模板來說邏輯太多了。嘗試在組件檔案中定義最終字串。您可以在此處輕松使用 join。簡化示例：

const address = [address, city, state].filter(Boolean).join(', ');
const namesAddress = [businessName, contactName, address].filter(Boolean).join(' : ');
const firstContactLine = [namesAddress, zipCode].filter(Boolean).join(' ');

const secondContactLine = [phone, email, website].filter(Boolean).join(' | ');

firstContactLine并且secondContactLine將是您在模板中顯示的結果值。

更新：CSS解決方案

HTML

<div>
  <span *ngIf="data.businessName" class="type-a">{{ data.businessName }}</span>
  <span *ngIf="data.contactName" class="type-a">{{ data.contactName }}</span>
  <span *ngIf="data.address" class="type-b">{{ data.address }}</span>
  <span *ngIf="data.city" class="type-b">{{ data.city }}</span>
  <span *ngIf="data.state" class="type-b">{{ data.state }}</span>
  <span *ngIf="data.zipCode" class="type-c">{{ data.zipCode }}</span>
</div>

<div>
  <span *ngIf="data.phone" class="type-d">{{ data.phone }}</span>
  <span *ngIf="data.email" class="type-d">{{ data.email }}</span>
  <span *ngIf="data.website" class="type-d">{{ data.website }}</span>
</div>

CSS

.type-b   .type-c::before,
.type-a   .type-c::before {
  content: ' ';
}

.type-b   .type-b::before {
  content: ', ';
}

.type-a   .type-b::before,
.type-a   .type-a::before {
  content: ' : ';
}

.type-d   .type-d::before {
  content: ' | ';
}

您可以使用這種方法輕松添加紅色。在這里試試：https ://stackblitz.com/edit/angular-jwuyh8?file=src/app/app.component.css

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/516529.html

標籤：有角度的打字稿前端

上一篇：Java I/O（1）：模型與流

下一篇：Angular14路由任何低于引數路由（即：id）的路由都無法路由