angular - 如何将数据组合到不同类型的对象数组并对其进行迭代以创建表行

Question

我从两个不同的 pojo 对象数组中的两个不同服务获得响应，我必须迭代以在表中创建行

以下是从服务加载数据并对其进行分页的功能。组件.ts

loadAll() {
        this.view360Service
            .query({
                page: this.page - 1,
                size: this.itemsPerPage,
                sort: this.sort()
            })
            .subscribe(
                (res: HttpResponse<IView360[]>) => this.paginateView360S(res.body, res.headers),
                (res: HttpErrorResponse) => this.onError(res.message)
            );
    }

    loadAllView360_2() {
        this.view360Service
            .queryView360_2_({
                page: this.page - 1,
                size: this.itemsPerPage,
                sort: this.sort()
            })
            .subscribe(
                (res: HttpResponse<IView360_2[]>) => this.paginateView360_2(res.body, res.headers),
                (res: HttpErrorResponse) => this.onError(res.message)
            );
    }
private paginateView360S(data: IView360[], headers: HttpHeaders) {
        this.links = this.parseLinks.parse(headers.get('link'));
        this.totalItems = parseInt(headers.get('X-Total-Count'), 10);
        this.queryCount = this.totalItems;
        this.view360S = data;
    }

    private paginateView360_2(data: IView360_2[], headers: HttpHeaders) {
        // this.links = this.parseLinks.parse(headers.get('link'));
        // this.totalItems = parseInt(headers.get('X-Total-Count'), 10);
        // this.queryCount = this.totalItems;
        this.view360_2_array = data;
    }

组件.html

<tbody>            
                <tr *ngFor="let view360 of view360S ;trackBy: trackId">

                    <td>
                        <a [routerLink]="['/view-360', view360.id, 'view' ]">{{view360.id}}</a>
                    </td>
                    <td *ngIf="userElement.includes('Companyname')">{{view360.companyname}}</td>
                    <td *ngIf="userElement.includes('Clientclassificationbd')">{{view360.clientclassificationbd}}</td>
                    <td *ngIf="userElement.includes('Companycode')">{{view360.companycode}}</td>
                    <td *ngIf="userElement.includes('Ratingstatus')">{{view360.ratingstatus}}</td>
                    <td *ngIf="userElement.includes('Sector')">{{view360.sector}}</td>
                    <td *ngIf="userElement.includes('Industrygroup')">{{view360.industrygroup}}</td>
                    <td *ngIf="userElement.includes('Industry')">{{view360.industry}}</td>
                    <td *ngIf="userElement.includes('Subindustry')">{{view360.subindustry}}</td>
                    <td *ngIf="userElement.includes('silmapping')">{{view360.crisilmapping}}</td>
                    <td *ngIf="userElement.includes('Percentage')">{{view360.percentage}}</td>
                    <td *ngIf="userElement.includes('Groupname')">{{view360.groupname}}</td>
                    <td *ngIf="userElement.includes('Groupcompany')">{{view360.groupcompany}}</td>
                    <td *ngIf="userElement.includes('Ralationship')">{{view360.ralationship}}</td>
                    <td *ngIf="userElement.includes('Ratingagency')">{{view360.ratingagency}}</td>
                    <td *ngIf="userElement.includes('Ratingos')">{{view360.ratingos}}</td>
                    <td *ngIf="userElement.includes('Latestrcmnumber')">{{view360.latestrcmnumber}}</td>
                    <td *ngIf="userElement.includes('Latestrcmdate')">{{view360.latestrcmdate | date:'mediumDate'}}</td>
                    <td *ngIf="userElement.includes('Latestrationalereleasedate')">{{view360.latestrationalereleasedate | date:'mediumDate'}}</td>
                    <td *ngIf="userElement.includes('Latestcrrreleasedate')">{{view360.latestcrrreleasedate | date:'mediumDate'}}</td>
                    <td *ngIf="userElement.includes('Nextreviewdate')">{{view360.nextreviewdate | date:'mediumDate'}}</td>
                    <td *ngIf="userElement.includes('Ratedquatumcr')">{{view360.ratedquatumcr}}</td>
                    <td *ngIf="userElement.includes('Ratedquatumbrl')">{{view360.ratedquatumbrl}}</td>
                    <td *ngIf="userElement.includes('Longtermrating')">{{view360.longtermrating}}</td>
                    <td *ngIf="userElement.includes('Shorttermrating')">{{view360.shorttermrating}}</td>
                    <td *ngIf="userElement.includes('Cdrlink')">{{view360.cdrlink}}</td>
                    <td *ngIf="userElement.includes('Outstanding')">{{view360.outstanding}}</td>
                    <td *ngIf="userElement.includes('Withdrawan')">{{view360.withdrawan}}</td>
                    <td *ngIf="userElement.includes('Unaccepted')">{{view360.unaccepted}}</td>
                    <td *ngIf="userElement.includes('Rcmno')">{{view360.rcmno}}</td>
                    <td *ngIf="userElement.includes('Rcmdate')">{{view360.rcmdate | date:'mediumDate'}}</td>
                    <td *ngIf="userElement.includes('Assigmenttype')">{{view360.assigmenttype}}</td>
                    <td *ngIf="userElement.includes('Created On')">{{view360.createdOn | date:'medium'}}</td>
                    <td *ngIf="userElement.includes('Created By')">{{view360.createdBy}}</td>
                    <td *ngIf="userElement.includes('Modified On')">{{view360.modifiedOn | date:'medium'}}</td>
                    <td *ngIf="userElement.includes('Modified By')">{{view360.modifiedBy}}</td>
                    <td *ngIf="userElement.includes('Status')">{{view360.status}}</td>


                    <td class="text-right">
                        <div class="btn-group flex-btn-group-container">
                            <button type="submit" [routerLink]="['/view-360', view360.id, 'view' ]" class="btn btn-info btn-sm">
                                <fa-icon [icon]="'eye'"></fa-icon>
                                <span class="d-none d-md-inline">View</span>
                            </button>
                            <button type="submit" [routerLink]="['/view-360', view360.id, 'edit']" class="btn btn-primary btn-sm">
                                <fa-icon [icon]="'pencil-alt'"></fa-icon>
                                <span class="d-none d-md-inline">Edit</span>
                            </button>
                            <button type="submit" [routerLink]="['/', { outlets: { popup: 'view-360/'+ view360.id + '/delete'} }]" replaceUrl="true"
                                queryParamsHandling="merge" class="btn btn-danger btn-sm">
                                <fa-icon [icon]="'times'"></fa-icon>
                                <span class="d-none d-md-inline">Delete</span>
                            </button>
                        </div>
                    </td>
                </tr>
            </tbody>

现在我希望 view360_2_array 中的数据也应该迭代，并且对于行 请提出可能的方法，谢谢...

标签： angular

Answer 1

你可以使用forkJoin（https://www.learnrxjs.io/operators/combination/forkjoin.html）

const obs1 = this.view360Service
            .query({
                page: this.page - 1,
                size: this.itemsPerPage,
                sort: this.sort()
            })
            .pipe(map((res: HttpResponse<IView360[]>) => this.paginateView360S(res.body, res.headers));


const obs2 = this.view360Service
            .queryView360_2_({
                page: this.page - 1,
                size: this.itemsPerPage,
                sort: this.sort()
            })
            .pipe(map((
                (res: HttpResponse<IView360_2[]>) => this.paginateView360_2(res.body, res.headers)),
forkJoin([obs1, obs2]).subscribe((data: any) => {
      // you'll get an array where every element is the array of rows from your queries/observables. 
      const combined = data[0].concat(data[1]); // example with array concat
});