angular - CdkDropList 表

Question

我正在尝试生成一个包含用户及其用户故事的表，并且标题包含他们所处的当前状态。现在我想为整个表创建 CdkDropLists，以便我可以在用户和不同状态之间移动用户故事。但是，我正在努力将所有这些列表连接在一起。我想在我的 HTML 中列出所有可用的 CdkDropLists 列表，以便我可以将它们相互连接。

我在互联网上四处寻找解决方案，但我发现很难想出一个。

现在所有列表都具有相同的#name，但我需要能够生成名称并将所有这些列表链接在一起。这样拖放功能就可以在表中工作。

<table>
  <tr><th></th><th>to do</th><th>doing</th><th>test</th><th>done</th></tr>
  <tr *ngFor="let user of users"><td>{{user.name}}</td>
    <td *ngFor="let status of status">
      <div cdkDropList
           [cdkDropListData]="getStatusStories(user.id, status.name)"
           [cdkDropListConnectedTo]="unasignedList"
           (cdkDropListDropped)="onDrop($event, user.id, status.name)"
           #dropList="cdkDropList" style="width: 25%; border: 1px solid black;">
         <div cdkDrag *ngFor="let story of getStatusStories(user.id, status.name)" class="item">{{story.name}}</div>
      </div>
    </td>
  </tr>
</table>

private sprints: Sprint[];
private userStories: Userstory[];
private users: User[];
private status: Status[] = [
  { id: "1", name: "to do" } as Status,
  { id: "2", name: "doing" } as Status,
  { id: "3", name: "test" } as Status,
  { id: "4", name: "done" } as Status
];

ngOnInit() {
  this.firebaseService.getSprints().subscribe(sprints => (this.sprints = sprints));
  this.firebaseService.getStories().subscribe(stories => (this.userStories = stories));
  this.firebaseService.getUsers().subscribe(users => (this.users = users));
}

getStatusStories(userId: string, statusName: string): Userstory[] {
  const filteredStories = [];
  this.userStories.forEach(element => {
    if (element.status === statusName && element.user_id === userId) {
      filteredStories.push(element);
    }
  });
  return filteredStories;
}

标签： angularangular-cdk