根據Angular 4中的變量在* ngFor循環中修改HTML標簽

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

嘗試將屬性綁定與三元運算符結合使用，例如：

[fxLayout.xs]="question.isQASideBySide ? 'row' : 'column'"

Answer 2

請檢查您的* ngIf語法，我認為您在then和else之前的ngIf條件末尾缺少分隔符。

請參考此鏈接，

ngIf語法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>