angular - Angular 7在一个http请求JSON中加载公式的所有数据并将多个变量传递给组件
问题描述
我正在学习 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
3 次并返回带有三个对象(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)拥有的类数量吗?
解决方案
您不必执行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>
推荐阅读
- tensorflow - 使用 Tensorflow/Keras,有没有办法分割输入数据进行训练,这样我就不会用完 RAM?
- generics - 特征对象如何将具有泛型方法的特征作为参数?
- python-3.x - 使用 Python 请求将数据安全地发布到 Django 网站
- python - TypeError: update() 接受 2 个位置参数,但给出了 3 个:Python
- javascript - 如何在html中的多个文本框中将多个文本框值从一个网页传输到另一个网页
- javascript - 此 JavaScript 代码应无限期运行,直到提供空字符串,但事实并非如此。为什么?
- java - 接口中的通用字段
- sql - 如何确保引用表也有数据
- anaconda - 是否可以选择复制一行并在 anaconda ide 中制作多个光标?
- macos - 如何在 Safari 中启用“显示开发菜单”