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

我正在学习Angular将创建一个我可以管理客户的表单。我创建了一个

客户表单组件

：

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)
      );
  }   
...
}

}

我的创建类如下所示：

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);
  }

}

普通班：

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

我的原始课程是：

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

JSON的结构是：

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

---

还有一种方法可以减少每个实体（例如Customer、CustomerRaw、CustomerCreate）的类数量吗？

您不必进行

映射

三次即可获得所需的输出。当您使用

管道

时，操作符的输入是前一个操作符的输出。当你有3次贴图时，它是这样的

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

有没有办法减少每个实体的类数量

您可以使用

any

并避免使用类型。但是，不要这样做！您应该始终使用类，因为这将帮助您进行开发。这是正确的，因为你有它。 我还会再添加一个类，并将

Observable

替换为类似

Observable

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

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)
  );
}