Таблица CdkDropList - PullRequest
Новая
       16

Таблица CdkDropList

1 голос
/ 14 июня 2019

Я пытаюсь сгенерировать таблицу, состоящую из пользователей и их пользовательских историй, а заголовки - из текущего статуса, в котором они находятся. Теперь я хотел бы создать CdkDropLists для всей таблицы, чтобы я мог перемещать пользовательские истории между пользователями и пользователями.разные статусы.Однако я изо всех сил пытаюсь соединить все эти списки вместе.Я хотел бы иметь список всех моих CdkDropLists, доступных в моем HTML, чтобы я мог соединить их друг с другом.

Я искал в Интернете решения, но мне трудно найти один.

На данный момент все списки имеют одинаковое #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;
}
...