在 Angular 2 中同时使用两个指令的有效方法
Efficient way of using two directives at the same time in Angular 2
我是 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 和 feeds)的条件方式。
if pageOrSearch then feedsPage else feeds
.
首先检查组件中的变量
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>
您可以使用三元运算符来避免在一个标记中使用两个指令,例如:
<div *ngFor="let feed of (pageOrSearch ? feedsPage : feeds)">
我是 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 和 feeds)的条件方式。
if pageOrSearch then feedsPage else feeds
.
首先检查组件中的变量
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>
您可以使用三元运算符来避免在一个标记中使用两个指令,例如:
<div *ngFor="let feed of (pageOrSearch ? feedsPage : feeds)">