我试图在我的Angular页面中创建一些单选按钮,这些按钮从API调用中获取值,但遇到了一些问题。
我的代码无法编译,并在控制台中显示以下错误:
类型“boolean”不可分配给类型“[{ name:string; value:数字;默认值:number; }]'.[ng] [ng] 103
this.preSelectedPaymentOptions = this.paymentMethod.payments.default === 1;
类型“[{ name:string; value:数字;默认值:number; }]'.[ng] [ng] 103
this.preSelectedPaymentOptions = this.paymentMethod.payments.default === 1;
类型“[{ name:string; value:数字;默认值:number; }]'.[ng] [ng] 105
console.log('登录:',this.paymentOptions.name);
我的数据在console.log中看起来像这样:
hasACashDiscount:0
payments: Array(2)
0: {name: 'Card', value: 0, default: 1}
1: {name: 'Cash', value: 3, default: 0}
我创建了一个 model.ts 文件。它看起来像这样:
export interface PaymenyOptions {
hasACashDiscount: number;
payments: [{
name: string;
value: number;
default: number;
}];
}
在我的 component.ts 文件中,我是这样从API调用订阅中获取数据的:
getPaymentOptions() {
this.cartService.getPaymenyOptions().subscribe(
data => {
this.paymentMethod = data;
this.paymentOptions = this.paymentMethod.payments;
this.preSelectedPaymentOptions = this.paymentMethod.payments.default === 1;
console.log('All data: ', this.paymentMethod);
console.log('Payment methods: ',this.paymentOptions.name);
console.log('Preselected method: ', this.preSelectedPaymentOptions);
}, error => {
console.log('Error', error);
});
}
这是我在HTML中显示的:
<ion-item *ngFor="let payment of paymentOptions;let i = index">
<ion-icon name="today-outline"></ion-icon>
<ion-label>{{ payment.name }}</ion-label>
<ion-radio slot="end" [value]="payment.value"></ion-radio>
</ion-item>ž
我做错了什么?
1条答案
按热度按时间wwtsj6pe1#
paymentMethod.payments
是一个数组。要使用
default === 1
获取(过滤)对象,您应该使用Array.filter()
方法。要以数组的形式获取对象的名称,必须使用
Array.map()
方法。根据您当前的接口,
payments
属性是一个数组,但只需要一个对象。您应该将其修改为:以允许阵列可以具有多个对象。