javascript - 如何在模板中使用 async 命令显示数据?
问题描述
我有一个 Angular 8 应用程序。我正在使用async
命令将数据从子组件传递到父组件。但是数据是由服务器返回的,但没有被HTML
模板显示出来。
这是我的typescript
:
correspondenceEntries$: Observable<DossierEntry[]>;
attachmentEntries$: Observable<DossierEntry[]>;
@Input() allCorrespondence: Array<DossierEntry>;
@Input() correspondenceEntries: Array<DossierEntry>;
@Input() attachmentEntries: Array<DossierEntry>;
message = '';
emptyMessageCorrespondentie = 'Geen correspondentie.';
errorMessageConnection = 'Er ging iets mis met de connectie. Probeer over enkele minuten nogmaals.';
correspondenceLoaded = false;
showingSingle = false;
single: DossierEntry;
constructor(private documentCorrespondeceService: DocumentCorrespondenceService, private authService: AuthService) {}
ngOnInit() {
this.authService.loginStatus().subscribe(user => {
const UUID = user.profile.participant;
this.documentCorrespondeceService.getDossierEntry(UUID, 'correspondence').subscribe(result => {
this.handleCorrespondenceLoad(result), (this.correspondenceLoaded = true);
}, msg => (this.message = this.emptyMessageCorrespondentie));
});
}
handleCorrespondenceLoad(result: any) {
if (result.length === 0) {
this.message = this.emptyMessageCorrespondentie;
return;
}
this.allCorrespondence = result;
this.attachmentEntries = [];
this.correspondenceEntries = [];
const groups = _.groupBy(result, 'type');
console.log(this.correspondenceEntries = groups.correspondence);
console.log(this.attachmentEntries = groups.attachments);
this.correspondenceEntries = groups.correspondence;
this.attachmentEntries = groups.attachments;
}
这是HTML
模板:
<h2 class="dossier-page-header">Correspondentie</h2>
<p class="data-entry" *ngIf="!allCorrespondence">{{ message }}</p>
<ng-container *ngIf="(correspondenceEntries$ | async) as correspondenceEntries">
<app-dossier-correspondence-list [correspondenceEntries]="correspondenceEntries" ></app-dossier-correspondence-list>
</ng-container>
<ng-container *ngIf="(attachmentEntries$ | async) as attachmentEntries">
<app-dossier-correspondence-attachments [attachmentEntries] = "attachmentEntries"></app-dossier-correspondence-attachments>
</ng-container>
<app-dossier-correspondence-item
[item]="single"
(goBack)="goBack($event)"
*ngIf="showingSingle">
</app-dossier-correspondence-item>
所以当我这样做时:
console.log(this.correspondenceEntries = groups.correspondence);
console.log(this.attachmentEntries = groups.attachments);
我看到数据:
Array(13)
:4200/dossier-dossier-module-ngfactory.js:17533 Array(3)
但它不会显示在视图中。
那么如何改进这一点,数据也将显示在视图中。
谢谢你。
我明白。
但是如何做到这一点:
this.attachmentEntries$ = this.documentCorrespondeceService.getDossierEntry(UUID, 'correspondence').subscribe(result => {
this.handleCorrespondenceLoad(result), (this.correspondenceLoaded = true);
}, msg => (this.message = this.emptyMessageCorrespondentie));
});
当然这确实有效。那么如何使用 Observables:
correspondenceEntries$: Observable<DossierEntry[]>;
attachmentEntries$: Observable<DossierEntry[]>;
?
因为有两个数组。
所以你的意思是这样的:
<app-dossier-correspondence-list *ngFor="let item of correspondenceEntries" ></app-dossier-correspondence-list>
和这个:
ngOnInit() {
this.authService.loginStatus().subscribe(user => {
const UUID = user.profile.participant;
this.documentCorrespondeceService.getDossierEntry(UUID, 'correspondence').subscribe(result => {
this.handleCorrespondenceLoad(result), (this.correspondenceLoaded = true);
}, msg => (this.message = this.emptyMessageCorrespondentie));
});
}
但是
子组件看起来已经像这样:
<div *ngIf="!showingSingle && correspondenceEntries && correspondenceEntries.length > 0;">
<div class="main-row main-row-dossier">
<section class="data-entry">
<h3 class="dossier-header">Algemeen</h3>
<table class="dossier-table" *ngIf="correspondenceEntries else loadingCorrespondenceEntires ">
<thead class="dossier-tableheader">
<tr>
<th class="dossier-tablehead fixed-one-fifth">Datum</th>
<th class="dossier-tablehead fixed-four-fifths">Onderwerp</th>
</tr>
</thead>
<tbody class="dossier-tablebody">
<tr class="dossier-correspondencerow" *ngFor="let entry of correspondenceEntries; let i = index" (click)="gotoItem(i, entry.type)">
<td>{{ entry.date | date:"dd-MM-y" }}</td>
<td>{{ entry.name }}</td>
</tr>
</tbody>
</table>
</section>
</div>
</div>
<ng-template #loadingCorrespondenceEntires>
<div>..Loading </div>
</ng-template>
解决方案
您正在混合两种订阅 Observable 的方式。选择一个,不要两个都做。
解决方案1:
// component
this.myService.getDataFromServer().subscribe(
result => this.data = result
);
<!-- HTML -->
<div *ngFor="let item of data">
<span>{{item.label}}</span>
</div>
解决方案2:
// component
this.data$ = this.myService.getDataFromServer()
<!-- HTML -->
<div *ngIf="(data$ | async) as data">
<span>{{data.label}}</span>
</div>
推荐阅读
- python - 如何在 Django Movies 网站中添加系列和剧集?
- php - PHP cookie 在本地主机上工作但不在实时服务器上
- java - java中的数组不是连续的吗?
- javascript - 使用带有反应和状态的 setTimeout 更新对象数组
- swift - 本地化字符串未从 M1 芯片机中的自定义包中加载
- kubernetes - 即使分配了 LoadBalancer IP,也无法访问 Longhorn UI [metalLB]
- asp.net-core - Blazor WebAssembly - 如何添加不需要重新编译或重建项目的新 *.razor 页面
- react-native - 无法解析 phonepe.intentsdk.android.release
- c# - 从 DataGridView 中提取日期到 DateTimePicker
- express - 使用 API 网关设置 swagger-ui-express