![](/img/trans.png)
[英]generate a random number that run x amount of times. Depending on what the user inputs in javascripit
[英]Generate number of mat-cards depending on te user
我得到了簡單的 mat-cards 拖放:
<div id="pagewrapper">
<section class="todos-section-wrapper">
<mat-card class="card">
<mat-card-header class="card-header">
<mat-card-title class="card-title">Team</mat-card-title>
</mat-card-header>
<mat-card-content class="card-content">
<div cdkDropList #todoList="cdkDropList" [cdkDropListData]="todos" [cdkDropListConnectedTo]="[completedList, roomOneList]"
class="list" (cdkDropListDropped)="drop($event)">
<div class="todo-item" *ngFor="let todo of todos" cdkDrag>{{todo}}</div>
</div>
</mat-card-content>
</mat-card>
<mat-card class="card">
<mat-card-header class="card-header">
<mat-card-title class="card-title">Room 1</mat-card-title>
</mat-card-header>
<mat-card-content class="card-content">
<div cdkDropList #completedList="cdkDropList" [cdkDropListData]="completed"
[cdkDropListConnectedTo]="[todoList, roomOneList]" class="list" (cdkDropListDropped)="drop($event)">
<div class="todo-item" *ngFor="let roomTwo of completed" cdkDrag>{{roomTwo}}</div>
</div>
</mat-card-content>
</mat-card>
<mat-card class="card">
<mat-card-header class="card-header">
<mat-card-title class="card-title">Room 2</mat-card-title>
</mat-card-header>
<mat-card-content class="card-content">
<div cdkDropList #roomOneList="cdkDropList" [cdkDropListData]="roomOne"
[cdkDropListConnectedTo]="[completedList, todoList]"
class="list" (cdkDropListDropped)="drop($event)">
<div class="todo-item" *ngFor="let roomOne of roomOne" cdkDrag>{{roomOne}}</div>
</div>
</mat-card-content>
</mat-card>
</section>
</div>
還有我的 app.componen.ts
import { Component } from '@angular/core';
import {CdkDragDrop, moveItemInArray, transferArrayItem} from '@angular/cdk/drag-drop';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
todos: string[] = [
'Jan Nowak',
'Jan Kowalski',
'Monika Nowak',
'Radek Testowy',
'Marek Tester',
'Marian Kowalski'
];
completed: string[] = [
'Marek Pospieszalski'
];
roomOne: string[] = [
'Mariusz Kowalski'
];
drop(event: CdkDragDrop<string[]>) {
if (event.previousContainer === event.container) {
moveItemInArray(
event.container.data,
event.previousIndex,
event.currentIndex
);
} else {
transferArrayItem(
event.previousContainer.data,
event.container.data,
event.previousIndex,
event.currentIndex
);
}
console.log('todos: '+this.todos);
console.log('completed: '+this.completed);
console.log('roomOne: ' + this.roomOne);
}
}
實際上我有 2 個墊子卡:房間 1 和房間 2 我的目標是實現我有簡單的用戶輸入器,我可以在其中詢問您想要多少個房間,然后用戶輸入例如 4 個房間,他得到了 4 個墊子卡然后他可以把人放在房間里。
如何動態生成墊卡?
您必須使用 *ngFor 動態渲染 n 張卡片。 看看這個例子: https://stackblitz.com/edit/angular-ivy-iqvkks?file=src%2Fapp%2Fapp.component.ts
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.