如何解决当我将 [cdkDropListConnectedTo] 添加到 dropList 时,应用程序崩溃
所以当我从我的 html 代码中删除 [cdkDropListConnectedTo] 时,我的应用程序运行顺利,但是当我把它放回去时,它说:属性 'costStructureList' 在类型 'BmcCardComponent' 上不存在。
这是为什么?很确定它确实存在,并且相同的代码在另一个项目中运行得很好。
<mat-grid-list cols="10" rowHeight="100px" class="bmc" >
<mat-grid-tile
*ngFor="let tile of bmc_tiles"
[id]="tile.text"
[colspan]="tile.cols"
[rowspan]="tile.rows"
>
<div class="header-container">
<h1 class="element-title">{{tile.text}}</h1>
<h2 class="element-description" >{{tile.description}}</h2>
</div>
<div class="content-container" [ngSwitch]="tile.text" >
<div *ngSwitchCase="'Key-Partners'"
cdkDropList
#keyPartnersList="cdkDropList"
[cdkDropListData]="keyPartners"
[cdkDropListConnectedTo]="[costStructureList]"
class="example-list"
(cdkDropListDropped)="drop($event)">
<div class="example-box" *ngFor="let item of keyPartners; let i = index" cdkDrag>{{i}} : {{item}}</div>
</div>
<div *ngSwitchCase="'Cost-Structure'"
cdkDropList
#costStructureList="cdkDropList"
[cdkDropListData]="costStructure"
[cdkDropListConnectedTo]="[keyPartnersList]"
class="example-list"
(cdkDropListDropped)="drop($event)">
<div class="example-box" *ngFor="let item of costStructure; let i = index" cdkDrag>{{i}} : {{item}}</div>
</div>
</div>
</mat-grid-tile>
</mat-grid-list>
这是我的 TS 代码(不知道我做错了什么):
import { Component,OnInit,Input } from '@angular/core';
import {CdkDragDrop,moveItemInArray,transferArrayItem} from '@angular/cdk/drag-drop';
export interface Tile {
color: string;
cols: number;
rows: number;
text: string;
description?:string;
}
@Component({
selector: 'app-bmc-card',templateUrl: './bmc-card.component.html',styleUrls: ['./bmc-card.component.css']
})
export class BmcCardComponent implements OnInit {
@Input() ngSwitch: any;
bmc_tiles: Tile[] = [
{text: 'Key-Partners',cols: 2,rows: 5,color: 'lightblue'},{text: 'Key-Activities',rows: 3,color: 'lightgreen'},{text: 'Value-Propositions',color: '#DDBDF1'},{text: 'Customer-Relationships',{text: 'Customer-Segments',{text: 'Key-Resources',rows: 2,color: 'lightpink'},{text: 'Channels',{text: 'Cost-Structure',cols: 5,{text: 'Revenue-Streams',color: '#DDBDF1'}
];
keyPartners = ['A','B','C','D'];
costStructure = ['200','300','1000','50'];
constructor() { }
ngOnInit(): void {
}
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.currentIndex);
}
}
}
非常感谢您的帮助
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。