有任何方法可以将div放到角材料的mat-tab中
我有4个标签,使用角形材质的mat-tab。每个选项卡都包含列表对象。 如何使用角形材料垂垂放置将项目从第一标签移动到第二标签
父组件:
<div class="col-xs-12 no-padding ">
<div class="content-container" cdkDropListGroup>
<mat-tab-group (selectedTabChange)="tabChanged($event)">
<mat-tab>
<ng-template mat-tab-label>View all</ng-template>
<div class="clear-20"></div>
<app-contact-list *ngIf="viewAllFirst" [modeView]="modeView" [listContactPersonnel]="listContactViewAll"
[isAddNewContact]="mode.indexOf('add') > -1" [isDeleteContact]="mode.indexOf('delete') > -1"
[isEditContact]="mode.indexOf('edit') > -1" [listContactPersonnelTypeMaster]="listContactPersonnelTypeMaster"
[tabView]="'ViewAll'" (btnAddNewContact)="onAddNewContact()" (btnClickEditItem)="onClickEditItem($event)"
(btnClickDeleteItem)="onClickDeleteItem($event)"></app-contact-list>
</mat-tab>
<mat-tab *ngFor="let tab of listContactPersonnelTypeMaster" label="{{ tab.ContactPersonnelName }}"
aria-label="{{ tab.ContactPersonnelCode }}">
</mat-tab>
</mat-tab-group>
<div class="clear-20"></div>
<div #container></div>
</div>
</div>
子组件:
<div cdkDropList class="col-xs-6" [cdkDropListData]="evenListContactPersonel" (cdkDropListDropped)="drop($event)">
<div class="item" *ngFor="let contact of evenListContactPersonel" [hidden]="!listContactPersonnel" cdkDrag
[cdkDragDisabled]="tabView === 'ViewAll' ? true : false">
<div class="item-content-placeholder" *cdkDragPlaceholder></div>
<div class="item-content">
<h4 class="name">{{ displayContactName(contact) }}</h4>
<p class="position">{{ contact?.Designation }}</p>
<p class="email">{{ contact?.Email }}</p>
<p class="telno">{{ displayPhoneNumber(contact) }}</p>
<p class="position2">{{ displayContactType(contact) }}</p>
<div class="item-bar">
<a class="item-delete mr-5 " (click)="onClickDeleteItem(contact)" *ngIf="modeView == 'edit'">
<i class="fa fa-trash-o fa-1x5 mat-icon"></i>
</a>
<a class="item-edit" (click)="onClickEditItem(contact)" *ngIf="modeView == 'edit'">
<i class="fa fa-pencil fa-1x5 mat-icon"></i>
</a>
</div>
</div>
</div>
</div>