在上一个问题here中,我试图仅在两条消息之间发生更改时才显示日期。
不同之处在于我现在已经连接到实时数据库(Firebase),所以我订阅了数据源并通过异步管道传递了它,然后通过索引和* ngIf:
<div *ngFor='let message of (chat | async) ; let i = index'>
<button *ngIf="i == 0 || (message.timestamp | date: 'ddMMMMyyyy') != ((chat | async)[i-1].timestamp | date: 'ddMMMMyyyy')">
{{ message.timestamp | date:'ddMMM' }}
</button>
...
<!--More html elements below (omitted)-->
...
</div>
当我第一次加载视图时这很有效,但是,如果我将新条目推入chat
,我会收到以下错误:
TypeError: Cannot read property '0' of null
也许我不太确定异步管道是如何工作的,但是当我尝试返回{{ (chat | async).length }}
时,它按预期工作。有关变通方法/正确练习的任何建议吗?
答案 0 :(得分:8)
如果其他人发现了这个,因为它是关键词的第一个结果,我能够像这样使用异步管道获取* ngFor的索引(假设messages
是一个Observable一个可迭代的):
<div *ngFor="let message of (messages | async); let i = index;">
答案 1 :(得分:3)
仍然不确定如何在这里操作AsyncPipe,但我确实找到了一个不使用管道的解决方法。我希望在关闭之前等待一个更好的答案。
我订阅了我的类中的数据源,并在显示之前使用for循环操作数组。
我的问题中的(模板)代码现在变为:
<div *ngFor='let message of messages; let i = index'>
<button *ngIf="message.isNewDay">
{{ message.timestamp | date:'ddMMM' }}
</button>
...
<!--More html elements below (omitted)-->
...
</div>
在控制器中:
private chatid: string //chat id passed from previous screen
private chat: FirebaseListObservable<any>;
private messages: any = [];
constructor(private firebase: FirebaseService,
private _datepipe: DatePipe) {
}
ionViewLoaded() {
this.chat = this.firebase.database.list('/chat-messages/' + this.chatid);
this.chat.subscribe((data) => {
this.messages = data;
for (let i: number = 0; i < this.messages.length; i++) {
if (i === 0)
this.messages[i].isNewDay = true;
else {
let date1 = this._datepipe.transform(this.messages[i].timestamp, 'ddMMMMyyyy');
let date2 = this._datepipe.transform(this.messages[i-1].timestamp, 'ddMMMMyyyy');
if (date1 !== date2)
this.messages[i].isNewDay = true;
else
this.messages[i].isNewDay = false;
}
}
});
}
请注意,我目前在类代码(以及模板中)中使用DatePipe,因此必须使用providers: [DatePipe]
和pipes: [DatePipe]
。
答案 2 :(得分:2)
正如上面提到的@Primal Zed let company of (filteredCompaniesAliases | async); let i = index"
应该使用普通的html表格进行语法示例:
<table>
<tr *ngFor="let company of (filteredCompaniesAliases | async); let i = index"">
<td>
{{selectedDiscountableCharge.name}}
</td>
<td>
${{selectedDiscountableCharge.amount}}
</td>
<td>
${{selectedDiscountableCharge.amount - ( (selectedDiscountableChargePercentanges / 100) * selectedDiscountableCharge.amount ) }}
</td>
</tr>
</table>
组件中的:
companyAliasFilterCtrl: FormControl;
filteredCompaniesAliases: Observable<any[]>;
...
this.filteredCompaniesAliases = this.companyAliasFilterCtrl.valueChanges
.pipe(
startWith(''),
map(company => company ? this.filterOperatorsAliases(company) : this.companies.slice())
);
答案 3 :(得分:0)
我使用一个函数来显示(或不显示)日期。因此,仅在更改时显示日期(在此示例中):
<ion-list no-lines>
<ion-item-sliding *ngFor="let trip of tripsExt$ | async; let i = index">
<ion-item>
<ion-row (click)="change(trip)">
<ion-col col-6>
{{showOnChange(trip.date)}}
</ion-col>
<ion-col col-6>
{{trip.end_address_name}}
</ion-col>
</ion-row>
</ion-item>
<ion-item-options side="left">
<button ion-button color="primary" (click)="delete(trip)">
Delete
</button>
</ion-item-options>
</ion-item-sliding>
</ion-list>
使用showOnChange:
showOnChange(currentDate) {
if (currentDate != this.previousDate) {
this.previousDate = currentDate
return currentDate
}
return ''
}
答案 4 :(得分:0)
如果要一起使用* ngFor,AsyncPipe和索引-您应使用以下结构:
{{1}}
经过测试并可以在Angular 7上使用。