Question

如何删除Angular 4中的动态标签？这是我试过的代码

<mat-tab *ngFor="let thisTab of tabs" label={{thisTab}} class="close-thik">

</mat-tab>

CSS

/ *关闭按钮* /

[class*='close-'] {
  color: #777;
  font: 14px/100% arial, sans-serif;
  position: absolute;
  right: 5px;
  text-decoration: none;
  text-shadow: 0 1px 0 #fff;
  top: 5px;
}

.close-classic:after {
  content: 'X'; /* ANSI X letter */
}

.close-thin:after {
  content: '×'; /* UTF-8 symbol */
}

.close-thik:after {
  content: '✖'; /* UTF-8 symbol */
}

/* Dialog */

.dialog {
  background: #ddd;
  border: 1px solid #ccc;
  border-radius: 5px;
  float: left;
  height: 200px;
  margin: 20px;
  position: relative;
  width: 150px;

}

/* Container */

.container {
  width: 576px; margin: 0 auto;
}

.container:after {
  content: '';
  display: block;
  clear: both;
}

无法实现选项卡上的关闭按钮。有没有标准方法通过CSS执行此操作？或者Angular本身有一些相同的规格？

Answer 1

您只需从数组中删除元素即可完成此操作：

组件方：

tabs = [
    { label : 'Tab1' , content : 'Content1'},
    { label : 'Tab2' , content : 'Content2'},
    { label : 'Tab3' , content : 'Content3'},
    { label : 'Tab4' , content : 'Content4'},
    { label : 'Tab5' , content : 'Content5'},
]

removeMe(i){
    this.tabs.splice(i, 1);
}

模板面：

<mat-tab-group>
  <mat-tab *ngFor='let tab of tabs;let i = index;' label="{{tab.label}}"> 
    {{tab.content}}
    <button (click)='removeMe(i)'>Remove</button>
  </mat-tab>

</mat-tab-group>

<强> WORKING DEMO

Angular 4 mat-tab删除选项卡

1 个答案: