HTML - 使用逗号分隔动态拆分数组值

Question

使用ng-repeat 显示从后端获取的值数组。但我想用逗号分隔特定值并动态显示它。

请在下面找到 HTML 代码。

<li ng-repeat="history in claimGroupingHistories">
 <div class="row">
            <div class="col-lg-4 col-md col-sm-4 col-xs-4">
              <label>{{'claimgroup.history.oldvalueselected'|translate}}:</label>
            </div>
            <div id="historyOldValueSelected_{{$index}}" class="col-lg-8 col-md-8 col-sm-8 col-xs-8">{{history.oldValueSelected}}</div>
            </div>
 </div>
</li>

在这里，{{history.oldValueSelected}} 中的值将类似于 ABC1234, XYZ2345, IJK098。而不是在单行中显示值。我想用逗号分隔值并显示该值。

例如：

现在，它显示为，

Old Value Selected : ABC1234, XYZ2345, IJK098

期待输出，

Old Value Selected : ABC1234
                     XYZ2345
                     IJK098

使用逗号分隔动态拆分数组值。

测试数据：

[  
{  
  "id":null,
  "dealerCode":"T030",
  "oldValueSelected":null,
  "newValueSelected":"Group by minimum claims, Customer Invoice or Repair Date",
  "createdBy":"System Admin",
  "createdAt":"2019-01-23T06:13:00.000Z",
  "lastModifiedAt":"2019-01-22T18:42:59.000Z"
},
{  
  "id":null,
  "dealerCode":"T030",
  "oldValueSelected":"Group by minimum claims, Customer Invoice or Repair Date",
  "newValueSelected":"Group by minimum claims",
  "createdBy":"System Admin",
  "createdAt":"2019-01-23T06:13:00.000Z",
  "lastModifiedAt":"2019-01-23T06:13:07.000Z"
},
{  
  "id":null,
  "dealerCode":"T030",
  "oldValueSelected":"Group by minimum claims",
  "newValueSelected":"Group by minimum claims, Customer Invoice No",
  "createdBy":"System Admin",
  "createdAt":"2019-01-23T06:13:00.000Z",
  "lastModifiedAt":"2019-01-23T06:14:54.000Z"
},
{  
  "id":null,
  "dealerCode":"T030",
  "oldValueSelected":"Group by minimum claims, Customer Invoice No",
  "newValueSelected":null,
  "createdBy":"System Admin",
  "createdAt":"2019-01-23T06:13:00.000Z",
  "lastModifiedAt":"2019-01-24T06:23:33.000Z"
},
{  
  "id":null,
  "dealerCode":"T030",
  "oldValueSelected":null,
  "newValueSelected":"Customer Invoice No, Group by minimum claims",
  "createdBy":"System Admin",
  "createdAt":"2019-01-23T06:13:00.000Z",
  "lastModifiedAt":"2019-01-24T06:23:58.000Z"
}
]

Answer 1

我假设 history.oldValueSelected 是一个字符串，因为如果 oldValueSelected 是一个数组，你可以像这样使用 ng-repeat：

<div layout="column">
    <span ng-repeat="oldValue in history.oldValueSelected" ng-bind="oldValue"></span>
</div>

现在 oldValueSelected 是一个字符串。我可以想到两个选择：你可以

• 获取数据后拆分控制器中的值
• 将其拆分为 ng-repeat

如果您选择第二个选项，您可以执行以下操作：

<div layout="column">
    <span ng-repeat="oldValue in history.oldValueSelected.split(', ')" ng-bind="oldValue"></span>
</div>

编辑：我使用 class="row"

时没有得到预期的输出

<li ng-repeat="history in $ctrl.histories">
    <!-- class="row" didn't deliver the expected output-->
    <div layout="row">
        <div class="col-lg-4 col-md col-sm-4 col-xs-4">
            <!--  For testing purposes - replace with your code-->
            <label>{{history.name}}:</label>
        </div>
        <div layout="column">
            <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8" ng-repeat="oldValue in history.oldValueSelected.split(', ')">{{oldValue}}</div>
        </div>
    </div>
</li>

在控制器中用于测试目的：

this.histories = [
    {name: "number 1", oldValueSelected:"ABC1234, XYZ2345, IJK098"},
    {name: "number 2", oldValueSelected:"ABC1234, IJK098"},
    {name: "number 3", oldValueSelected:"IJK098"}
];

Answer 2

app.component.html
<div *ngFor="let hero of heroes.split(', ')">
 {{ hero }}
</div>

app.component.ts
private  heroes: string = "123123, 123123, 345354, 5675757";

输出：

123123
123123
345354
5675757