Question

我的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>都是可点击的，这应该会打开一个弹出窗口，它应该显示该列中的所有不同值。

我想知道我有我的初始任务列表，如何使用用户点击的列从该数组创建另一个数组？

Answer 1

public onDisplayContext($event, columnKey) {
  let colArray = []
  this.Tasks.map(task => {
    colArray.push(task[columnKey]);
  });
  //some code here
}

希望它会有所帮助

Answer 2

您的数据模型以及您在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);
}

从数组角度4获取属性数组

2 个答案: