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并返回带有三个对象（Customer，Country []，Reference []）的Observable吗？就像是：

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

}

我的创建类看起来像：

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）的类数量吗？

Answer 1

您无需执行map 3次即可获得所需的输出。使用pipe时，运算符的输入是前一个运算符的输出。如果你有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

在您的示例中，您可以使用一个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)
  );
}

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

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