如何在 Angular 8 中為數組中的值創建超鏈接

Question

我有看起來像這樣的數據

plans:[
  {
    "planName": "PlanA",
    "planCode": "PLN001"
  },
  { 
    "planName": "PlanB",
    "planCode": "PLN002"
  },
  {
    "planName": "PlanC",
    "planCode": "PLN003"
  }
]

我需要在 UI HTML 中顯示，如下所示

<p> User 1 is enrolled in PlanA , PlanB , PLanC </p>

問題1：如何從計划數組中獲取值以在一個語句中用逗號顯示如上。

問題 2：我需要為問題 1 語句的每個計划提供一個超鏈接，該語句將根據計划代碼轉到不同的組件。

<a href="#{planCode}_details">{{PlanName}}</a>

超鏈接必須采用的其他組件具有它的 id

id="{{p.planCode}}_details"

任何幫助表示贊賞

這是我到目前為止所嘗試的。

<p *ngIf="plans?.length > 0">{{UserName}} has a balance in the {{plans.planName.join(', ')}} .</p>

Answer 1

問題 1

 var plans = [ { "planName": "PlanA", "planCode": "PLN001" }, { "planName": "PlanB", "planCode": "PLN002" }, { "planName": "PlanC", "planCode": "PLN003" }] var result = (plans.map(plan => plan.planName)).reduce((acc, curr) => acc + ', ' + curr) console.log(result);

您可以嘗試以下方法來獲取所有planName屬性的逗號分隔字符串。

 planNames: string; this.planNames = (plans.map(plan => plan.planName)).reduce((acc, curr) => acc + ', ' + curr);

並使用它的模板

<p> User 1 is enrolled in {{ planNames }} </p>

問題2

您可以使用數據綁定表示法或插值將成員變量綁定到href屬性。

 <ng-container *ngFor="let plan of plans"> <a href="#{{ plan?.planCode }}_details">{{ plan?.PlanName }}</a> </ng-container>

更新

我不確定您到底在追求什么，但是要將這兩個問題結合起來，您可以執行以下操作

<p>User 1 is enrolled in <ng-container *ngFor="let plan of plans; let last=last"> <a href="#{{ plan?.planCode }}_details">{{ plan?.PlanName }}</a> <ng-container *ngIf=",last">;&nbsp; </ng-container> </ng-container> </p>

在這種情況下，您不需要額外的變量planNames 。

Answer 2

也許是這樣：

<p> User 1 is enrolled in 
  <a *ngFor="let plan of plans" href="#{{plan.planCode}}_details">{{plan.PlanName}}</a>
</p>