Question

我在Angular中有一个标签组。我希望默认情况下会选择第一个选项卡但是，当我将<mat-toolbar color="primary"> <span color="white">קשת נחושה</span> <span class="spacer"></span> <button mat-icon-button> <mat-icon class="example-icon">more_vert</mat-icon> </button> </mat-toolbar> <mat-tab-group mat-stretch-tabs [selectedIndex]="0" (focusChange)="selectedTab($event)"> <mat-tab> <ng-template mat-tab-label> <mat-icon>home</mat-icon> </ng-template> </mat-tab> <mat-tab> <ng-template mat-tab-label> <mat-icon>book</mat-icon> </ng-template> </mat-tab> <mat-tab> <ng-template mat-tab-label> <mat-icon>message</mat-icon> </ng-template> </mat-tab> </mat-tab-group> <router-outlet></router-outlet>设置为0时，它不会选择第一个标签，而将其设置为1或2 会选择其他标签。

这是我的app.component.html：

<div>
  <button id="file1" data-url="https://www.google.com">file 1</button>
  <button id="file2" data-url="https://www.slashdot.org">file 2</button>
</div>

var buttons = document.querySelectorAll('button');
for(var i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener('click', openNewTab, false);
}

function openNewTab(event) {
   window.open(event.target.dataset.url, '_blank');
}

Answer 1

它是一个错误，但您可以使用2种数据绑定方式，它可以正常工作

<md-tab-group [(selectedIndex)]="value">

Answer 2

已选择我的标签，但样式未更新。我必须设置：

private Decoder byteArrayResourceDecoder() {
        Decoder decoder = (response, type) -> {
            if (type instanceof Class && ByteArrayResource.class.isAssignableFrom((Class) type)) {
                return StreamUtils.copyToByteArray(response.body().asInputStream());
            }
            return new JacksonDecoder().decode(response, type);
        };

        return new ResponseEntityDecoder(decoder);
    }

我还必须设置：封装：ViewEncapsulation.None //在@Component内

Angular Material选项卡SelectedIndex 0不起作用

2 个答案: