Question

我是Angular 2的新手，这是我的代码

<ng-container *ngIf="pageOrSearch"> 
    <div *ngFor="let feed of feedsPage">
        <font color="#8b0000"><u>Title: </u></font><strong>{{feed.title}}</strong><br>
        <font color="#8b0000"><u>PubDate: </u></font>{{feed.pubDate}}<br>
        <font color="#8b0000"><u>Link: </u></font><a target="_blank" href="{{feed.link}}">{{feed.link}}</a><br>
        <font color="#8b0000"><u>Description: </u></font>{{feed.description}}<br>
        <font color="#8b0000"><u>Category: </u></font>{{feed.category}}<hr>
     </div>
</ng-container>

<ng-container *ngIf="!pageOrSearch"> 
     <div *ngFor="let feed of feeds">
        <font color="#8b0000"><u>Title: </u></font><strong>{{feed.title}}</strong><br>
        <font color="#8b0000"><u>PubDate: </u></font>{{feed.pubDate}}<br>
        <font color="#8b0000"><u>Link: </u></font><a target="_blank" href="{{feed.link}}">{{feed.link}}</a><br>
        <font color="#8b0000"><u>Description: </u></font>{{feed.description}}<br>
        <font color="#8b0000"><u>Category: </u></font>{{feed.category}}<hr>  
     </div>
</ng-container>

这很好用，但在Angular 2中是否有同时使用两个指令的有效方法？我的意思是使用两个变量（feedsPage和feed）的条件方式。

if pageOrSearch then feedsPage else feeds。

Answer 1

您可以使用三元运算符来避免在一个标记中使用两个指令，例如：

<div *ngFor="let feed of (pageOrSearch ? feedsPage : feeds)">

Answer 2

首先简单检查组件中的变量

result:any;
if(pageOrSearch){
   this.result=feedsPage;
} else {
   this.result=feeds
}

然后在你的HTML代码中：

<ng-container> 
     <div *ngFor="let feed of result">
        <font color="#8b0000"><u>Title: </u></font><strong>{{feed.title}}</strong><br>
        <font color="#8b0000"><u>PubDate: </u></font>{{feed.pubDate}}<br>
        <font color="#8b0000"><u>Link: </u></font><a target="_blank" href="{{feed.link}}">{{feed.link}}</a><br>
        <font color="#8b0000"><u>Description: </u></font>{{feed.description}}<br>
        <font color="#8b0000"><u>Category: </u></font>{{feed.category}}<hr>  
     </div>
</ng-container>

在Angular 2中同时使用两个指令的有效方法

2 个答案: