Angular Material 如何在“活动”选项卡上显示焦点图标

Question

我正在使用 Angular material 并在 HTML 中动态生成选项卡。现在我想在活动或 selected 选项卡上显示下拉箭头图标。

我创建了以下代码，但每次它都返回错误值。

谁能帮我做一下。

import { SelectionModel } from '@angular/cdk/collections';
export class HeaderComponent implements OnInit {
 
  private selection = new SelectionModel();  

  select(tab) {
    if (!this.selection.isSelected(tab)) {
      this.selection.clear();
      this.selection.select(tab);
    }
  }

  isSelected(tab): boolean {    
    return this.selection.isSelected(tab);
  }
}

HTML

我正在使用 *ngif="isSelected(tab)" 和 (click)="select(tab.makeLineName)" 调用并检查 HTML[= 中的值13=]

<div class="tabGroupDiv row">
    <div class="lossLinesDiv">
        <mat-tab-group class="lossMatGrpCls" mat-align-tabs="left">
            <mat-tab *ngFor="let tab of masterData;let i=index">
                <ng-template mat-tab-label>
                    <div class="validatorTabClass">
                        <div class="row">
                            **<button **(click)="select(tab.makeLineName)"**>{{tab.makeLineName}}</button>**
                        </div>
                        <div>
                            <mat-icon *ngif="isSelected(tab)" class="down-arrow-mat-icon">arrow_drop_down</mat-icon>
                        </div>
                    </div>
                </ng-template>
                <div [formGroup]="lineItem" *ngFor="let lineItem of getItems(tab.makeLineName); let j = index">
                    <div class="admin-console-main-wrapper">
                        <div class="col-xs-3 col-md-3 deo-dv-list-wrapper">
                            <h5 class="topbar-items-text">Design Process Capacity (Tonnes Per Hour)</h5>
                            <mat-form-field appearance="outline">
                                <input matInput type="number" class="line-fte-input smed-input"
                                    placeholder="Design Process Capacity" formControlName="designProcessCapacity">
                            </mat-form-field>
                        </div>
                    </div>
                </div>
            </mat-tab>
        </mat-tab-group>
    </div>
</div>

Answer 1

如果我没看错，你想在选中的选项卡上显示箭头图标吗？首先，我看到这里有一个错字

<mat-icon *ngif="isSelected(tab)" class="down-arrow-mat-icon">arrow_drop_down</mat-icon>

*ngif 应该是 *ngIf

我觉得你可以用material标签组的属性isActive，看看你的标签是不是activated/clicked/selected/如果是就可以显示了drop-arrow 图标。我在下面添加了当您的选项卡处于活动状态时显示图标所需的最少代码。

这样您就不需要在 typescript file 中进行这些检查了。

<mat-tab-group class="lossMatGrpCls" mat-align-tabs="left">
  <mat-tab *ngFor="let tab of masterData;let i=index" #matTabTest>
    <ng-template mat-tab-label>
      <div class="validatorTabClass">
        <div class="row">
            **<button **(click)="select(tab.makeLineName)"**>{{tab.makeLineName}}</button>**
        </div>
        <div>
          <mat-icon *ngIf="matTabTest.isActive" class="down-arrow-mat-icon">arrow_drop_down</mat-icon>
        </div>
      </div>
    </ng-template>
  </mat-tab>
</mat-tab-group>

我添加了#matTabTest以便我们可以为mat-tab提供参考。然后我在 *ngIf=matTabTest.isActive 中使用它来检查是否显示图标。

Angular Material 如何在“活动”选项卡上显示焦点图标

How to show focus icon on Active tab in Angular Material

javascript

angular

angular-material

angular8