Angular2 * ng如果多個條件

Question

我正在開發angular2示例應用程序。

我添加了1個menuViews對象，它裏面有名稱，圖標和url成員。

在頁面我迭代那個工作正常的menuViews。

我有一些場景中，一些URL的將是內部網站的網址一樣../app/histoy 但在某些情況下，它是「https://play.google.com/」

以下是我的html代碼：

<li *ngFor="let item of menuViews"> 
    <a class="ripple-effect" [routerLink]="[item.url]" *ngIf="isUserLoggedIn == true" >    
     <span class="media-body media-middle" *ngIf="isUserLoggedIn == true">{{item.name}}</span> 
    </a>    
</li> 

所以在<a>標籤我想把條件，如：

if (item.url.indexOf("http://") == -1 && item.url.indexOf("https://") == -1) { 
    //set value in [routerLink] 
} else { 
    //set value in href 
} 

這樣的條件，我想在這個。主要是我想分叉內部和外部鏈接。

主要問題是，當它外部鏈接，然後它試圖重定向在base url + external link（localhost:4200#home/https://play.google.com）這是錯誤的，所以我想基於一些條件來管理兩者。

其他建議也歡迎..

Answer 1

你可以做類似如下：

<li *ngFor="let item of menuViews"> 
     // This will used for internal links which does not have http 
    <template [ngIf]="item.url.indexOf('http') == -1"> 
     <a class="ripple-effect" [routerLink]="[item.url]" *ngIf="isUserLoggedIn == true" >    
     <span class="media-body media-middle" *ngIf="isUserLoggedIn == true">{{item.name}}</span> 
     </a>    
    </template> 
    // This will used for external links which have http or https and url value is set in href so hover problem also be resolved 
    <template [ngIf]="item.url.indexOf('http') != -1"> 
     <a class="ripple-effect" href="{{item.url}}" *ngIf="isUserLoggedIn == true" >    
     <span class="media-body media-middle" *ngIf="isUserLoggedIn == true">{{item.name}}</span> 
     </a>    
    </template> 
</li> 

讓我知道這個作品或不按照您的要求。

好運