Question

我有开关：

<ng-container matColumnDef="compare" >
  <th mat-header-cell *matHeaderCellDef mat-sort-header> Compare </th>
  <!--<td mat-cell *matCellDef="let protocol"><i class="material-icons">favorite_border</i></td>-->
  <td  mat-cell *matCellDef="let experiment" (click)="$event.stopPropagation()" >
      <ui-switch (change)="onSelect(checked, experiment)" [(ngModel)]="checked"></ui-switch>
  </td>
</ng-container>

我想抓住它的不同价值。我的意思是，当我在这里检查一个时，它们都会继续。

有我的.ts：

  onSelect(bool: boolean, selectedExp: Experiment){
      if(bool == true){
        if(this.selectedExperiments.length==0){
          this.selectedExperiments[0]=selectedExp.experimentId;
        } else {
          this.selectedExperiments[this.selectedExperiments.length] = selectedExp.experimentId} // because the first table box is 0
        }
        if(bool = false){
          for(var i = 0; i < this.selectedExperiments.length; i++){
            if(this.selectedExperiments[i] == selectedExp.experimentId){
              this.selectedExperiments.splice(i,1); //splice delete the element and reorganize the table
            }
          }
        }
        console.log(this.selectedExperiments);
      }

我只想获取我检查的行的数据。

Answer 1

您可以使用ngSwitch并采用以下方式实施案件。

<container-element [ngSwitch]="switch_expression">
  <some-element *ngSwitchCase="match_expression_1">...</some-element>
  <some-element *ngSwitchCase="match_expression_2">...</some-element>
  <some-other-element *ngSwitchCase="match_expression_3">...</some-other-element>
  <some-element *ngSwitchDefault>...</some-element>
</container-element>

例如，您在.ts文件中具有变量fruit，并根据其值来控制开关的大小写，并在<div>文件中显示不同的.html。

然后，您将编写如下代码：

<div [ngSwitch]="switch_expression">
  <div *ngSwitchCase="apple">APPLE</div>
  <div *ngSwitchCase="mango">MANGO</div>
  <div *ngSwitchCase="kiwi">KIWI</div>
  <div *ngSwitchDefault>this is default</div>
</div>

捕获列表中不同ng-switch的值

1 个答案: