對某些人來說這可能看起來很愚蠢，但我的大部分困惑是由我的挫敗感引起的。
我正在從這個頁面對一些端點進行 API 呼叫：https ://beacon-network.org/#/developers/api/beacon-network#bn-beacons
我能夠獲取資料的服務沒有問題。我的服務.ts：
import {HttpClient} from '@angular/common/http';
import {Injectable} from '@angular/core';
import {Observable} from 'rxjs';
import {Organization} from './organization'; // it is an interface that has id and name
import {Beacons} from './beacons'; // it is an interface that has id and name
@Injectable({
providedIn: 'root'
})
export class BeaconService {
constructor(private http: HttpClient) { }
public fetchOrganizations(): Observable<Organization[]> {
return this.http.get<Organization[]>('https://beacon-network.org/api/organizations');
}
public fetchBeacons(): Observable<Beacons[]> {
return this.http.get<Beacons[]>('https://beacon-network.org/api/beacons');
}
這是我的 component.html
<table mat-table [dataSource]="organizations$"
>
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef>ID</th>
<td mat-cell *matCellDef="let element"> {{element.id}} </td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef>Name</th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
<ng-container matColumnDef="beacons">
<th mat-header-cell *matHeaderCellDef>Beacons</th>
<td mat-cell *matCellDef="let element"> {{beaconCount}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
這給了我一個 ID、名稱和信標表。ID 和名稱匹配正確。我的問題是信標（信標計數）應該具有與公司名稱正確匹配的不同數字，我與 Postman 進行了檢查，例如 Wellcome Trust Sanger Institute 應該回傳 5。根據我得到的名稱，我得到 1、2 , 5 或 0 為所有。一些輸出應該是 21、5、4 等。
最后這是我的component.ts：
import {Component, OnInit} from '@angular/core';
import {Observable, Subscription} from 'rxjs';
import {BeaconService} from './beacon.service';
import {Organization} from './organization';
@Component({
selector: 'app-beacon',
templateUrl: './beacon.component.html',
styleUrls: ['./beacon.component.css']
})
export class BeaconComponent implements OnInit {
organizations$: Observable<Organization[]>;
beacon: any = {};
displayedColumns = ['id', 'name', 'beacons'];
organizations: Array<any>;
organizationId: string;
organizationName: string;
beaconData: any = {};
beacons: Array<any>;
beaconCount = 0;
organizationNameArray: Array<any> = [];
constructor(private beaconService: BeaconService) {
this.organizations$ = this.beaconService.fetchOrganizations();
}
ngOnInit() {
this.beaconService.fetchOrganizations().subscribe((organizationData) => {
this.organizations = organizationData;
for (let i = 0; i < this.organizations.length; i ) {
this.organizationId = this.organizations[i].id;
this.organizationName = this.organizations[i].name;
this.organizationNameArray.push(this.organizationName);
}
return this.organizationNameArray;
});
this.beaconService.fetchBeacons().subscribe(beacons => {
let organizationNameInBeacon;
this.beacons = beacons;
for (const beacon of this.beacons) {
this.beaconCount = 0;
for (const org of this.organizations) {
if (beacon.organization === org.name) {
organizationNameInBeacon = beacon.organization;
this.beaconCount ;
}
}
}
return this.beaconCount;
});
}
}
我的輸出應該是組織的名稱和正確的信標數量。我在這里需要幫助。
回應摘要應類似于：找到：6，未找到：39，不適用：36
uj5u.com熱心網友回復：
我只是將 fork 加入回應，然后將它們匹配在一起，然后使用該 observable 進行系結。
export class BeaconComponent implements OnInit {
displayedColumns = ['id', 'name', 'beacons'];
fetching:boolean
countedBeaconOrgs$: Observable<OrganizationBecons[]>;
constructor(private beaconService: BeaconService) {}
ngOnInit() {
this.fetching = true;
this.countedBeaconOrgs$ = forkJoin([
this.beaconService.fetchOrganizations(),
this.beaconService.fetchBeacons(),
]).pipe(
map(([orgs, beacons]): OrganizationBecons[] => {
const countedOrgs: OrganizationBecons[] = [];
for (const org of orgs) {
countedOrgs.push({
...org,
beaconCount: beacons.filter((b) => b.organization == org.name)
.length,
});
}
return countedOrgs;
}),
tap(()=> {
this.fetching=false;
})
);
}
}
export interface OrganizationBecons extends Organization {
beaconCount: number;
}
系結
<table mat-table [dataSource]="countedBeaconOrgs$" >
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef>ID</th>
<td mat-cell *matCellDef="let element">{{ element.id }} </td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef>Name</th>
<td mat-cell *matCellDef="let element">{{ element.name }}</td>
</ng-container>
<ng-container matColumnDef="beacons">
<th mat-header-cell *matHeaderCellDef>Beacon Count</th>
<td mat-cell *matCellDef="let element">{{ element.beaconCount }}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>
<h1 *ngIf="fetching">Loading</h1>
updated stackblitz: https://stackblitz.com/edit/angular-vjttsn?file=src/beacon/beacon.component.ts
edit: Added ugly loading to the requests.
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/455636.html