垫片之间的角度材料垂降

时间:2019-09-19 02:14:20

标签: angular angular-material

有任何方法可以将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>

0 个答案:

没有答案