角4; ngIfステートメント。複数の条件

Question

私は

あなたの助けを必要とする私のコードは以下があります：

 <mat-cell *matCellDef="let row"> 
     <span *ngIf="row.messageText.length >= 30">{{row.messageText.substr(0, 25)}}</span> 
     <span *ngIf="row.messageText.length < 30">{{row.messageText.substr(0, 30)}}</span> 
     <span *ngIf="(row.messageText == null) || (row.messageText === 'undefined'">.....</span> 
     </mat-cell> 

私はきちんとngIfディレクティブを使用している場合、私は知りません。

私はrow.messageTextの長さが30より短い場合messageTextの長さが長いか30

と等しい場合、「row.messageText.substr（0、25）とのスパンを表示する必要があり、私はスパンを表示する必要がありますスパンでrow.messageText.substr（0、30）。

そしてrow.messageTextがnullまたは未定義の場合、私がしたいのですが、 "....."。

で私を助けてください正確に使用してください。

Answer 1

実際には、角度のパイプを使用することができます

Answer 2

私はngOnInitで条件を定義したい：その後、

private condition: boolean = false; 

ngOnInit(){ 
    this.condition = (row.messageText.length >= 30); 
} 

を：あなたのような状況では

<mat-cell *matCellDef="let row"> 
     <span *ngIf="row.messageText && condition">{{row.messageText.substr(0, 25)}}</span> 
     <span *ngIf="row.messageText && !condition">{{row.messageText.substr(0, 30)}}</span> 
     <span *ngIf="!row.messageText">.....</span> 
     </mat-cell> 

さようなら

Answer 3

に言及し、スイッチのcase文を使用することをお勧めします下記：

<div [ngSwitch]="true"> 
    <div *ngSwitchCase="row.messageText.length >= 30"> 
     <span>{{row.messageText.substr(0, 25)}}</span> 
    </div> 
    <div *ngSwitchCase="row.messageText.length < 30"> 
     <span>{{row.messageText.substr(0, 30)}}</span> 
    </div> 
    <div *ngSwitchCase="(row.messageText == null) || (row.messageText === 'undefined'"> 
     <span>...</span> 
    </div> 
    <div *ngSwitchDefault> 
     <span></span> 
    </div> 
</div>