时间戳

首页 > 解决方案 > 在一个 ts 文件中使用多个加载器服务

angular - 在一个 ts 文件中使用多个加载器服务

问题描述

早上好。我试图让一个选择框在我的文件数组旁边显示公司列表。它最终将用于按公司过滤数组。

我觉得我有什么应该工作的，但它现在只显示一个带有菜单栏的空白页面......

ts

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { Datafile, DatafileLoader } from '../datafile-loader.service';
import { Company, CompanyLoader } from '../../company/company-loader.service';

@Component({
  selector: 'app-datafile-list',
  templateUrl: './datafile-list.component.html',
  styleUrls: ['./datafile-list.component.scss']
})
export class DatafileListComponent {
  list: Observable<Datafile[]>;
  listC: Observable<Company[]>;

  constructor(loader: DatafileLoader, loaderc: CompanyLoader) {
    this.list = loader.getList();
    this.listC = loaderc.getList();
  }
}

html

<mat-card class="dashboard-card">
  <mat-card-header [style.backgroundColor]="'orange'">
    <mat-card-title>Datafiles</mat-card-title>
  </mat-card-header>
    <mat-card-content [ngStyle]="{'height':'500px', 'overflow-y': 'auto', 'background-color': 'white'}" >
      <div *ngFor="let l of list | async">
          <p style="line-height:1">
            <span> <img src="{{l.layoutPreDefined == false ? '../../../assets/images/newlayout.jpg' : '../../../assets/images/predefinedlayout.jpg'}}"/></span><br />
            <span style="font-size:12pt"> <a [routerLink]="l.id"> {{ l.fileName }} </a> </span><br />
            <span style="font-size:12pt"> {{ l.companyAbbreviation}}  &nbsp;&nbsp;  {{ l.fileTypeName }}</span><br />
            <img src="../../../assets/images/divider.jpg">
          </p>
      </div>
    </mat-card-content>
</mat-card>


<mat-form-field>
  <mat-select>
      <mat-option *ngFor="let c of listC | async" [value]="c">{{c.companyAbbreviation}}</mat-option>
  </mat-select>
</mat-form-field>

公司装载机

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { map, tap } from 'rxjs/operators';

const apiUrl = 'http://xxxxxx/DRMSAPI-dev/API/company';

export interface Company {
  id?: string;
  name: string;
  companyAbbreviation: string;
}

@Injectable()
export class CompanyLoader {
  constructor(private http: HttpClient) {}

  getList(): Observable<Company[]> {
    return this.http.get<Company[]>(apiUrl).pipe(map(longList => longList.slice(0, 9)), tap(results => console.log(results)));
  }

  getDetails(id: string): Observable<Company> {
    return this.http.get<Company>(
      `${apiUrl}/${id}`
    );
  }
}

数据文件模块

import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { DatafileDetailComponent } from './datafile-detail/datafile-detail.component';
import { DatafileListComponent } from './datafile-list/datafile-list.component';

import { DatafileLoader } from './datafile-loader.service';

import { EDXMaterialModule } from '../shared/edxMaterialModule';
import { FlexLayoutModule } from '@angular/flex-layout';
import { CompanyLoader } from '../company/company-loader.service';

const routes: Routes = [
  { path: '', component: DatafileListComponent },
  { path: ':id', component: DatafileDetailComponent }

];

@NgModule({
  declarations: [DatafileListComponent, DatafileDetailComponent],
  imports: [
    CommonModule,
    HttpClientModule,
    RouterModule.forChild(routes),
    EDXMaterialModule,
    FlexLayoutModule
  ],
  providers: [DatafileLoader, CompanyLoader]
})
export class DatafileModule { }

我将 CompanyLoader 添加到 datafile.module 中的提供程序中，现在我看到了选择器和卡，但它们都是空白的......叹息......

标签： angular

解决方案

我不知道你的服务如何，但如果你需要连接到 Api，你需要使用 Observable 来获取你的数据。

您可以在以下链接中看到它

https://angular.io/guide/observables-in-angular

对不起，我需要看到你的服务来回答你。

推荐阅读