Angular 7 在一个 http 请求中加载公式的所有数据 JSON 并将多个变量传递给组件

Question

我正在学习 Angular 并将创建一个表格，我可以在其中管理我的客户。我创建了一个 customer-form-component:

export class CustomerFormComponent implements OnInit {
  customer: Customer = CustomerCreate.empty();
  customerForm: FormGroup;
  countries: Country[];
  references: Reference[];

  constructor(
    private fb: FormBuilder,
    private cs: CustomerService) { }

  ngOnInit() {
    ...
          this.cs.getSingleForForm(id)
            .subscribe(customer => {
              this.customer = customer[0];
              this.initCustomer();
            });
        }
      });
    });
    this.initCustomer();
  }
...

在那个表格中有两个选择（国家和参考）。为了减少请求，我想以 JSON 格式在一个 HTTP 请求（客户、国家、参考）中传递所有数据。这是我目前的工作服务：

export class CustomerService {
  private api = 'http://127.0.0.1/index.php';

  constructor(private http: HttpClient) {}

  getSingle(id: number): Observable<Customer> {
    return this.http
      .get<CustomerRaw[]>(`${this.api}?customer&id=${id}`)
      .pipe(
        retry(2),
        map(rawCustomers => rawCustomers['customer']
          .map(rawCustomer => CustomerCreate.fromObject(rawCustomer))
        ),
        catchError(this.handleError)
      );
  }   
...
}

是否有可能 map 三次并且 return 一个 Observable 具有三个对象（Customer、Country[]、Reference[]）？类似于：

getSingleForForm(id: number): Observable<Object> {
return this.http
  .get<any>(`${this.api}?customer&kdnr=${id}`)
  .pipe(
    retry(2),
    map(rawCustomers => rawCustomers['customer']
      .map(rawCustomer => CustomerCreate.fromObject(rawCustomer))
    ),
    map(rawCountries => rawCountries['country']
      .map(rawCountry => CountryCreate.fromObject(rawCountry))
    ),
    map(rawReferences => rawReferences['reference']
      .map(rawReference => ReferenceCreate.fromObject(rawReference))
    ),
    catchError(this.handleError)
  );

}

我创建的 classes 看起来像：

export class CountryCreate {

  static fromObject(rawCountry: CountryRaw| any): Country {
    return new Country(
      rawCountry.id,
      rawCountry.iso2,
      rawCountry.name,
      rawCountry.active,
    );
  }

  static empty(): Country {
    return new Country(0, '', '', true);
  }

}

正常class:

export class Country {
  constructor(
    public id: number,
    public iso2: string,
    public name: string,
    public active: boolean
  ) {}
}

我的原始 class 喜欢：

    export class CountryRaw {
  country: {
    id: number,
    iso2: string,
    name: string,
    active: boolean,
  } [];
}

JSON的结构是：

    {
"customer":[{...}],
"country":[{...}],
"reference":[{...}]
}

还有办法减少每个实体（例如 Customer、CustomerRaw、CustomerCreate）的 classes 数量吗？

Answer 1

您不必执行 map 3 次即可获得所需的输出。当你使用pipe时，运算符的输入是前一个运算符[=29=的输出 ].当你有 3 倍的 map 时，它会变成这样

sourceData .map(return sourceDataX) <-- the input here is the sourceData .map(return sourceDataY) <-- the input here is the sourceDataX .map(return sourceDataZ) <-- the input here is the sourceDataY

在您的示例中，您可以使用一个 map 运算符

getSingleForForm(id: number): Observable<Object> { return this.http .get<any>(`${this.api}?customer&kdnr=${id}`) .pipe( retry(2), map(data => { const costomer = data['customer'].map(rawCustomer => CustomerCreate.fromObject(rawCustomer)); const country = data['country'].map(rawCountry => CountryCreate.fromObject(rawCountry)); const reference = rawReferences['reference'].map(rawReference => ReferenceCreate.fromObject(rawReference)) return { customers, country, reference } } ), catchError(this.handleError) ); }

is there a way to reduce the amount of classes I have for every entity

您可以使用 any 并避免使用类型。但是，不要这样做！您应该始终使用 classes，因为这将有助于您的开发。这是正确的，因为你有它。我还会再添加一个 class 并将 Observable<Object> 替换为 Observable<MyType>

Angular 7 在一个 http 请求中加载公式的所有数据 JSON 并将多个变量传递给组件

Angular 7 Load all data for a formular in one http request JSON and pass multiple variables to component

typescript

angular-services

angular