Question

我正在创建一个角度应用程序。我使用角形材料创建了5个垫子平面按钮。代码

<button mat-flat-button [ngClass]="this.selected == 1 ? 'tab_selected' : 'tab_unselected'" (click)="change(1)">B-L1</button>
<button mat-flat-button [ngClass]="this.selected == 2 ? 'tab_selected' : 'tab_unselected'" (click)="change(2)">B-L2</button>
<button mat-flat-button [ngClass]="this.selected == 3 ? 'tab_selected' : 'tab_unselected'" (click)="change(3)">B-L3</button>
<button mat-flat-button [ngClass]="this.selected == 4 ? 'tab_selected' : 'tab_unselected'" (click)="change(4)">B-L4</button>
<button mat-flat-button [ngClass]="this.selected == 5 ? 'tab_selected' : 'tab_unselected'" (click)="change(5)">B-FC</button>

单击每个按钮时，将从.ts文件中调用一个函数。代码

change(n) {
    this.selected = n;
    if (n == 3){
      this.floor = 'BL3'
    }
    else if (n==4){
      this.floor  = 'BL4'
    }
    else if (n==2){
      this.floor  = 'BL2'
    }
    else if(n==1){
      this.floor  = 'BL1'
    }
    else if(n==5){
      this.floor  = 'BFC'
    }

    console.log('changing floor to' + this.floor)
    this.getData(this.floor)
}

this.getData(this.floor)进行api调用并获取该楼层的数据。这里B是一个块，L1，L2，L3 ..是该块中的楼层。

我想添加一个新的块D，该块具有L1，L2，L3，L4层。我可以通过手动添加更多按钮来为DL1，DL2，DL3添加更多按钮。但是，如果我选择了主按钮B或D，并且该功能块中的楼层在不丢失当前功能的情况下显示，该如何动态地执行呢？

谢谢。

Answer 1

这里是working Example

  <button md-raised-button *ngFor="let item of myButtons; let i = index" 
          (click)="changeActive(i)" #disable>{{item.name}} Basic</button>

.ts

    myButtons = [
    { name: 'Button 1' },
    { name: 'Button 2' },
    { name: 'Button 3' }
  ];

  lastClickedIndex;
  changeActive(i) {
    console.log("clicked ",i)
    this.lastClickedIndex = i;
  }

Answer 2

working example

在组件文件中添加以下代码

selected:any;
floorSelected:any;
block:any;
changeBlock(block){
   if(block){
     this.block = block;
   }
 }
selectedFloor(floor,block){
  if(floor){
    this.selected = floor;
    this.floorSelected = block+'L'+floor;
  }
  console.log( this.floorSelected );
}

并按如下所示在HTML页面中进行更改，

<div>
   <button mat-flat-button [ngClass]="this.selected == i ? 'tab_selected' : 'tab_unselected'" (click)="changeBlock('B')">B</button>
   <button mat-flat-button [ngClass]="this.selected == i ? 'tab_selected' : 'tab_unselected'" (click)="changeBlock('D')">D</button>
</div>

<div *ngIf="block">
   <div *ngFor="let i of [1,2,3,4,5]" >
      <button mat-flat-button [ngClass]="this.selected == i ? 'tab_selected' : 'tab_unselected'" (click)="selectedFloor(i,block)">{{block}}-L{{i}}</button>
   </div>
</div>

在角度材质中创建动态按钮

2 个答案: