У меня есть приложение Angular 8, и я использую вызов API следующим образом:
getDossierEntry(patientUUID: string, type: String = '' ): Observable<DossierEntry[]> {
const entryType = type === '' ? 'all' : 'type/' + type;
return this.http.get<DossierEntry[]>(`${this.baseUrl}/${patientUUID}/DossierEntry/` + entryType);
}
И у меня есть родительский компонент, подобный этому:
export class DossierCorrespondenceComponent implements OnInit {
correspondenceEntries$: 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);
}, () => (this.message = this.errorMessageConnection));
});
}
handleCorrespondenceLoad(result: any) {
if (result.length === 0) {
this.message = this.emptyMessageCorrespondentie;
return;
}
this.allCorrespondence = result;
this.attachmentEntries = [];
this.correspondenceEntries = [];
const groups = _.groupBy(result, 'type');
this.correspondenceEntries = groups.correspondence;
this.attachmentEntries = groups.attachments;
}
}
И шаблон HTMLвыглядит так:
<app-vital10-page [noTopBar]="true">
<h2 class="dossier-page-header">Correspondentie</h2>
<p class="data-entry" *ngIf="!allCorrespondence">{{ message }}</p>
<app-is-loading *ngIf="!correspondenceLoaded" message="Correspondentie wordt geladen"></app-is-loading>
<app-dossier-correspondence-list [correspondenceEntries] = "correspondenceEntries$ | async" ></app-dossier-correspondence-list>
<app-dossier-correspondence-item
[item]="single"
(goBack)="goBack($event)"
*ngIf="showingSingle">
</app-dossier-correspondence-item>
</app-vital10-page>
Тогда у меня есть дочерний компонент, подобный этому:
export class DossierCorrespondenceListComponent implements OnInit {
@Input()
correspondenceEntries: DossierEntry[];
@Input() showingSingle;
constructor() { }
ngOnInit() {
}
}
, и шаблон выглядит так:
<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>
Но теперьДанные дочернего компонента не отображаются в родительском компоненте.Но правильные данные загружены.Потому что, если я делаю console.log на этом:
this.correspondenceEntries = groups.correspondence;
this.attachmentEntries = groups.attachments;
, я вижу правильные массивы. Но не в представлении (файл htm)
Проблема с этим:
correspondenceEntries$: Observable<DossierEntry[]>;
Итак, мой вопрос, как передать наблюдаемое с помощью этого:
this.authService.loginStatus().subscribe(user => {
const UUID = user.profile.participant;
this.documentCorrespondeceService.getDossierEntry(UUID, 'correspondence').subscribe(result => {
this.handleCorrespondenceLoad(result), (this.correspondenceLoaded = true);
}, () => (this.message = this.errorMessageConnection));
});
}
Чтобы вам не приходилось использовать метод подписки:
.subscribe(result => {
this.handleCorrespondenceLoad(result), (this.correspondenceLoaded = true);
}, () => (this.message = this.errorMessageConnection));
И этовы увидите данные в виде
Спасибо.
Итак, я хочу сделать это:
ngOnInit() {
this.authService.loginStatus().subscribe(user => {
const UUID = user.profile.participant;
this.correspondenceEntries$ = this.documentCorrespondeceService.getDossierEntry(UUID, 'correspondence').subscribe(result => {
this.handleCorrespondenceLoad(result), (this.correspondenceLoaded = true);
}, () => (this.message = this.errorMessageConnection));
});
}
Но, конечно, это не работает.Но я не знаю, как это сделать, другие?
Итак, это вывод:
dossier-corresponden…ist.component.ts:21
{correspondenceEntries: SimpleChange}
correspondenceEntries: SimpleChange
currentValue: null
firstChange: true
previousValue: undefined
Ок, если я сделаю это:
<app-vital10-page [noTopBar]="true">
<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>
<app-dossier-correspondence-item
[item]="single"
(goBack)="goBack($event)"
*ngIf="showingSingle">
</app-dossier-correspondence-item>
</app-vital10-page>
тогдадо сих пор нет вывода в поле зрения.Но я получаю это в консоли:
(13) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
Но я вижу это:
currentValue: null
Но если я делаю это:
ngOnInit() {
console.log(this.correspondenceEntries$);
this.authService.loginStatus().subscribe(user => {
const UUID = user.profile.participant;
this.correspondenceEntries$ = this.documentCorrespondeceService.getDossierEntry(UUID, 'correspondence')
});
}
Тогда я вижу предметыв представлении.
Но поэтому я удалил все это:
.subscribe(result => {
this.handleCorrespondenceLoad(result), (this.correspondenceLoaded = true);
}, () => (this.message = this.errorMessageConnection));
Так это правильно?
Нет, это не правильно.Потому что теперь это будет один большой список.И не два отдельных списка (массива)