从数组角度4获取属性数组
从数组角度4获取属性数组
提问于 2017-12-20 21:29:26
我在Angular 4应用程序中有一个任务数组，我将其显示在一个表中。这个JSON看起来像这样：
[
{
"id": "353610d2-4a6d-4dc3-9468-b88732d98397",
"dueDate": "20/12/2017",
"claimNumber": "19875677",
"actionType": "Admission",
"actionName": "Call TP Insurer",
"owner": "Ben Clarke",
"tags": [
{
"id": "78ef9592-7ed6-4192-aecc-4be8bb561f67",
"description": "Third Party 2",
"colour": "#df9626"
}
]
}
]然后，我在一个表中显示这个列表，如下所示：
<table>
<thead>
<tr>
<th>Date Due</th>
<th>
<span (click)="onDisplayContext($event, 'ClaimNumber')">Claim Number</span>
</th>
<th>
<span (click)="onDisplayContext($event, 'ActionType')">Action Type</span>
</th>
<th>
<span (click)="onDisplayContext($event, 'ActionName')">Action Name</span>
</th>
<th>
<span (click)="onDisplayContext($event, 'Owner')">Owner</span>
</th>
<th>
<span (click)="onDisplayContext($event, 'Tags')">Tags</span>
</th>
<th></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let task of Tasks; let i = index">
<td>{{task.dueDate}}</td>
<td>{{task.claimNumber}}</td>
<td>{{task.actionType}}</td>
<td>{{task.actionName}}</td>
<td>{{task.owner}}</td>
<td>
<div fxLayout="row">
<div *ngFor="let tag of task.tags; let r = index">
<span class="tag" [style.background-color]="tag.colour">{{tag.description}}</span>
</div>
</div>
</td>
<td>
<div class="chk_round">
<input type="checkbox" id="chk_{{task.id}}" />
<label for="chk_{{task.id}}"></label>
</div>
</td>
</tr>
</tbody>
</table>现在，从HTML中可以看到，每个<th>都可以单击，这应该会打开一个弹出窗口，其中应该显示该列中的所有不同值。
我想知道我有了我的初始任务列表，如何从该数组创建另一个仅包含用户单击的列的数组？
回答 2
Stack Overflow用户
发布于 2017-12-20 21:41:24
public onDisplayContext($event, columnKey) {
let colArray = []
this.Tasks.map(task => {
colArray.push(task[columnKey]);
});
//some code here
}希望能有所帮助
Stack Overflow用户
发布于 2017-12-20 22:49:34
您的数据模型和您在onDisplayContext中调用的内容有点不同步，但您可以这样做：
调整属性名称以匹配实际数据中的内容：
onDisplayContext($event, 'claimNumber')对于你所有的道具，这些都要通过你的模板来完成。
获取组件中的数据：
onDisplayContext($event, key: string) {
// filter the unique values
const uniques= this.Tasks
.map(row => row[key]) // get the property values
.filter((val, idx, arr) => arr.indexOf(val) === idx); // find uniques
this.displayData(uniques);
}实现displayData方法：
displayData(data: any[]) {
// call a popup or whatever here.
console.log(data);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47907164
复制相关文章
相似问题
腾讯云开发者
