Javascript 根据te用户生成mat卡的数量

我得到了简单的垫子卡片，在那里我得到了拖放：

<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>

团队
{{todo}}
1号房间
{{roomTwo}}
2号房间
{{roomOne}}

还有我的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);
    
  }
  
 
}

从'@angular/core'导入{Component}；
从“@angular/cdk/drag drop”导入{CdkDragDrop，moveItemInArray，transferArrayItem}；
@组成部分({
选择器：'应用程序根'，
templateUrl:“./app.component.html”，
样式URL:['./app.component.scss']
})
导出类AppComponent{
待办事项：字符串[]=[
“Jan Nowak”，
“Jan Kowalski”，
“莫妮卡·诺瓦克”，
“Radek Testowy”，
“马立克测试仪”，
“玛丽安·科瓦尔斯基”
];
已完成：字符串[]=[
“Marek Pospieszalski”
];
roomOne:字符串[]=[
“Mariusz Kowalski”
];
drop（事件：CdkDragDrop）{
if（event.previousContainer==event.container）{
moveItemInArray(
event.container.data，
event.previousIndex，
event.currentIndex
);
}否则{
转让协议(
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）；
}
}

事实上我有两张床垫卡：1号房间和2号房间 我的目标是实现一个简单的用户输入，在这里我可以询问您想要多少房间，然后用户键入例如4个房间，他得到4张垫卡 然后他可以把人安排在房间里

---

如何动态生成mat卡？

您必须使用*ngFor动态渲染n张卡。 看看这个例子：