Angular 角度4垫选项卡删除选项卡

如何删除Angular 4中的动态选项卡？这是我尝试过的代码

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

</mat-tab>

---

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

只需从数组中删除元素即可：

组件端：

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>

模板端：

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>

{{tab.content}
去除

---

这种模式有效，我之前也尝试过同样的模式。仍在寻求实现以下目标。这也会起作用，你们只需要把它放在标签标题中，我发现还有一个问题。如果当前正在关闭的选项卡右侧有一个已禁用的选项卡，则会选中该选项卡，尽管该选项卡已禁用