Question

我在Angular 4工作，我想根据我的* ngFor循环中的变量修改html标签。这是我尝试构建的代码：

<mat-card-content *ngFor="let question of questionGroup.profileQuestion class="mat-elevation-z2">

  <!-- I would like to do something like this in a *ngIF and isQASideBySide 
       is a boolean value -->  
  <div class="container" *ngIf="questions.isQASideBySide THEN fxLayout.xs='row' ELSE fxLayout.xs='column'" fxLayoutGap.xs="0" fxLayoutGap="10px">

      <div fxFlex="50%" fxFlexOrder="1" style="padding:10px">
         <p>
           {{ question.profileQuestionText }}
         </p>
      </div>

      <div fxFlex="50%" fxFlexOrder="1" style="padding:10px" >
         <!-- INPUT CONTROLS ....-->  
      </div>
  </div>
</mat-card-content>

Answer 1

尝试使用三元运算符的属性绑定，如：

myTableView.deleteRows(at: [indexPath], with: UITableViewRowAnimation.bottom)

Answer 2

请检查 * ngIf 的语法，我认为你在然后和其他之前在ngIf条件结束时错过了分隔符。

请参阅此链接，

ngIf Syntax Angular Docs

希望这有帮助！

Answer 3

修改后的代码

这里的工作是OP的最终代码（从问题本身移开）：

<mat-card-content *ngFor="let question of questionGroup.profileQuestion class="mat-elevation-z2">           
  <div class="container" [fxLayout]="question.isQASideBySide ? 'row' : 'column'" fxLayoutGap.xs="0" fxLayoutGap="10px">

      <div [fxFlex]="question.isQASideBySide ? '50%' : '100%'" fxFlexOrder="1" style="padding:10px">
         <p>
           {{ question.profileQuestionText }}
         </p>
      </div>

      <div fxFlex="50%" fxFlexOrder="1" style="padding:10px" >
         <!-- INPUT CONTROLS ....-->  
      </div>
  </div>
</mat-card-content>

根据Angular 4中的变量修改* ngFor循环中的HTML标记

3 个答案: