Angular Material以编程方式更改Tab标签

时间:2017-12-04 17:41:35

标签: angular angular-material2

我正在使用Angular 5.0.0和Material 5.0.0-rc.1。我有一个标签组,我希望最后一个标签总是有一个额外的图标按钮作为标签的一部分。

以下是选项卡组的现有代码:

<mat-tab-group #revTabGroup class="tab-group" [(selectedIndex)]="selectedTab">
    <mat-tab *ngFor="let rev of proposal.revisions" label="{{rev.revisionID}}">
        <proposal-revision [proposalRevision]="rev"></proposal-revision>
    </mat-tab>
</mat-tab-group>

我希望<button mat-icon-button matTooltip="Delete This Item"><mat-icon>delete_forever</mat-icon></button>仅显示在最后一个标签上的revisionID旁边。选项卡的数量会发生变化,因此需要调用一个函数或其他内容来更新哪个选项卡在更改后有按钮。

首先,甚至可以在标签标签上显示按钮,还是只能添加文字?

第二,有没有办法以编程方式设置标签,可能像this.revTabGroup.???.textLabel = "<button> ... </button>"

我甚至认为这可能是使用css完成的,例如:

.mat-tab-labels:last-child {
    ...
}

然而,我无法获得任何工作。任何人有任何想法或知道这是否可能?

1 个答案:

答案 0 :(得分:1)

您可以在$article = App\Articles:all();循环中使用Angular的const mongoose = require('mongoose'); let articleSchema = new mongoose.Schema({ title: String, article: String, image: String, source: String, url: String, categories: String, dateCrawled: Date, dateWritten: String }); let Article = mongoose.model('Article', articleSchema); module.exports = Article; 键:

array(3) { ["success"]=> bool(true) ["message"]=> string(0) "" ["result"]=> array(0) { } }