我是Angular的新手并在我的项目中遇到了障碍,我希望你们中有些经验丰富的开发者可以帮助我粉碎!
我有一个由服务调用的JSON文件。然后通过我的界面将这些数据注入到组件中,我在其中使用自定义词典类来列出'列表' (list1,list2等)我希望让用户编辑。
一切都很好,直到我不得不开始尝试使用“嵌套”#39;从我的JSON文件列出。我找不到在我的组件中使用它的方法,以便用户可以编辑字符串。
我的JSON看起来像这样:
[
{
"id": 1,
"insurer": "My Insurer",
"product": "Healthier Solutions",
"heading1": "Insurance",
"heading2": "Insurance Product Information Document",
"heading3": "What is the type of insurance?",
"heading4": "What is insured?",
"heading5": "What is NOT insured?",
"heading6": "Are there restrictions on my cover?",
"heading7": "Where am I covered?",
"heading8": "What are my obligations?",
"heading9": "When and how do I pay?",
"heading10": "When does my cover start and end?",
"heading11": "How do I cancel my contract?",
"subHeading1": "Insurance Company",
"subHeading2": "Healthier Solutions",
"textBox1": "Private Medical Insurance",
"textBox2": "You will have access to Aviva’s Key Hospital list in the UK.",
"textBox3": "Monthly by direct debit. The first payment will be collected within 14 days of setting up the policy. The following payments will be collected monthly thereafter.",
"textBox4": "The policy will start on your chosen start date and will end exactly 12 months later.",
"textBox5": "Please contact...",
"list1": {
"item1": "In and day patient hospital charges",
"item2": "In and day patient diagnostic tests",
"item3": "In and day patient diagnostic scans",
"item4": "In and day patient specialist fees",
"item5": "In and day patient radiotherapy",
"item6": "In and day patient chemotherapy",
"item7": "Outpatient specialist consultations",
"item8": "Outpatient diagnostic tests",
"item9": "Outpatient diagnostic scans",
"item10": "Outpatient radiotherapy",
"item11": "Outpatient chemotherapy"
},
"list2": {
"item1": "Routine monitoring of conditions",
"item2": "Pre-existing conditions",
"item3": "GP consultations and treatment",
"item4": "Emergency treatment",
"item5": "Chronic conditions (e.g. the management of incurable conditions such as asthma, diabetes, arthritis)",
"item6": "Self-inflicted conditions"
},
"list3": {
"item1": "Outpatient psychiatric treatment limited to £2,000 a year",
"item2": "Fees and charges by specialists are limited to Aviva’s fee guidelines"
},
"list4": {
"item1": "You must be a UK resident.",
"item2": "You must pay your monthly premiums in full and on time.",
"item3": "You must be registered with a UK GP at the point of making a claim.",
"item4": "You must ensure that all information that you provide is accurate and true to the best of your knowledge and belief."
}
}
]
我的界面如下所示:
import {
IDictionary
} from "../models/IDictionary";
export interface IProducts {
id: number;
insurer: string;
product: string;
heading1: string;
heading2: string;
heading3: string;
heading4: string;
heading5: string;
heading6: string;
heading7: string;
heading8: string;
heading9: string;
heading10: string;
heading11: string;
subHeading1: string;
subHeading2: string;
textBox1: string;
textBox2: string;
textBox3: string;
textBox4: string;
textBox5: string;
list1: IDictionary;
list2: IDictionary;
list3: IDictionary;
list4: IDictionary;
}
这是我的自定义词典类:
export interface IDictionary {
add(key: string, value: any): void;
remove(key: string): void;
containsKey(key: string): boolean;
keys(): string[];
values(): any[];
item1: string;
item2: string;
item3: string;
item4: string;
item5: string;
item6: string;
item7: string;
item8: string;
item9: string;
item10: string;
item11: string;
}
以下是我的组件使用的内容,用户可以通过导入我的界面并使用我的“编辑”功能,通过HTML输入编辑数据。模型:
editProduct(k:any) {
this.edit.heading1 = this.products[k].heading1;
this.edit.heading2 = this.products[k].heading2;
this.edit.heading3 = this.products[k].heading3;
this.edit.heading4 = this.products[k].heading4;
this.edit.heading5 = this.products[k].heading5;
this.edit.heading6 = this.products[k].heading6;
this.edit.heading7 = this.products[k].heading7;
this.edit.heading8 = this.products[k].heading8;
this.edit.heading9 = this.products[k].heading9;
this.edit.heading10 = this.products[k].heading10;
this.edit.heading11 = this.products[k].heading11;
this.edit.subHeading1 = this.products[k].subHeading1;
this.edit.subHeading2 = this.products[k].subHeading2;
this.edit.textBox1 = this.products[k].textBox1;
this.edit.textBox2 = this.products[k].textBox2;
this.edit.textBox3 = this.products[k].textBox3;
this.edit.textBox4 = this.products[k].textBox4;
this.edit.textBox5 = this.products[k].textBox5;
this.edit.list1item1 = this.products[k].list1.item1;
this.myValue = k;
}
updateProduct() {
let k = this.myValue;
for (let i = 0; i < this.products.length; i++) {
if (i === k) {
this.products[i] = this.edit;
this.edit = {};
}
}
this.showSuccessAlertMessage = "This product has been successfully updated.";
}
我希望做上面的事情 - &#39; this.edit.list1item1 = this.products [k] .list1.item1;&#39;,但这不起作用。
真的希望有意义,请告诉我,如果它没有,我会尽力解释清楚。
感谢。