在Angular 2中编辑子数组对象

时间:2017-11-13 15:35:36

标签: arrays json angular

我是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;,但这不起作用。

真的希望有意义,请告诉我,如果它没有,我会尽力解释清楚。

感谢。

0 个答案:

没有答案