Question

有很多方法可以过滤可观察的数组，以至于我真的淹没了这些差异。

如果垫选中没有选择公司，那么我想做的就是显示完整的可观察阵列，当然，如果选择了公司，则在选择公司时将其重新呈现在卡中。

>

我看到的是使用管道的东西，但没有映射和/或订阅和/或过滤器...

我应该保持服务状态不变（拉回整个数组），并使用.subscribe或类似内容对组件进行过滤吗？

loader.ts

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

const apiUrl = 'http://xxxxx/DRMSAPI-dev/API/datafile';

export interface Datafile {
  id?: string;
  ......    }


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

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

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

component.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';
import { Vendor, VendorLoader } from 'src/app/vendor/vendor-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[]>;
  listV: Observable<Vendor[]>;

  constructor(loader: DatafileLoader, loaderc: CompanyLoader, loaderv: VendorLoader) {
    this.list = loader.getList();
    this.listC = loaderc.getList();
    this.listV = loaderv.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 class="company-list">
  <mat-label>Client</mat-label>
  <mat-select>
    <mat-option>None</mat-option>
      <mat-option *ngFor="let c of listC | async" [value]="c">{{c.companyAbbreviation}}</mat-option>
  </mat-select>
</mat-form-field>

<mat-form-field class="vendor-list">
  <mat-label>Vendor</mat-label>
  <mat-select>
    <mat-option>None</mat-option>
      <mat-option *ngFor="let v of listV | async" [value]="v">{{v.name}}</mat-option>
  </mat-select>
</mat-form-field>

使用Mat-Select过滤可观察阵列

0 个答案: