Изменить значение свойства на вложенных объектах Angular 4+

Question

Я пытаюсь создать динамический вложенный объект, но не могу изменить значение свойств, которые я создаю

TS

import { Component } from '@angular/core';

  @Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    name = 'Test 1';
    expectedResult = {
      "0": { test: "Whoever" },
      "1": { test: "Whoever" },
      "2": { test: "Whoever" },
      "3": { test: "Whoever" },
      "4": { test: "Whoever" },
      "5": { test: "Whoever" },
      "6": { test: "Whoever" },
      "7": { test: "Whoever" },
    };
    obj = <any>{};
    test() {
      for (var i = 0; i <= 7; i++) {
        // how do i write this line 
        this.obj[i].test = "Whoever" //<-------------------------
      }
    }
  }

HTML

<code><hello name="{{ name }}"></hello>
<button class="btn btn-sm btn-outline-primary" (click)="test()">
Test me</button>
<pre>
  {{obj|json}}

  {{expectedResult|json}}

Добавление стекаблица для справки.

https://stackblitz.com/edit/mavvtogotest

РЕДАКТИРОВАТЬ

Спасибо всем, кто помогает, (извините), возможно, я не объяснил это хорошо.Решение должно работать над несколькими вложенными объектами, например:

 expectedResult = {
"0": {
  "0": {
    "0": { "test": "Whoever" },
    "1": { "test": "Whoever" },
    "2": { "test": "Whoever" }
  },
  "1": {
    "0": { "test": "changeMe","notToBeChanged":"oldValue" },
    "1": { "test": "changeMe","notToBeChanged":"oldValue" },
    "2": { "test": "changeMe","notToBeChanged":"oldValue" }
  },
  "2": {
    "0": { "test": "changeMe" ,"notToBeChanged":"oldValue" },
    "1": { "test": "changeMe" ,"notToBeChanged":"oldValue" },
    "2": { "test": "changeMe" ,"notToBeChanged":"oldValue" }
  }
},
"1": {
  "0": {
    "0": { "test": "changeMe" ,"notToBeChanged":"oldValue" },
    "1": { "test": "changeMe" ,"notToBeChanged":"oldValue" },
    "2": { "test": "changeMe" ,"notToBeChanged":"oldValue" }
  },
  "1": {
    "0": { "test": "changeMe" ,"notToBeChanged":"oldValue" },
    "1": { "test": "changeMe" ,"notToBeChanged":"oldValue" },
    "2": { "test": "changeMe" ,"notToBeChanged":"oldValue" }
  },
  "2": {
    "0": { "test": "changeMe" ,"notToBeChanged":"oldValue" },
    "1": { "test": "changeMe" ,"notToBeChanged":"oldValue" },
    "2": { "test": "changeMe" ,"notToBeChanged":"oldValue" }
  }
},
"2": {
  "0": {
    "0": { "test": "changeMe" ,"notToBeChanged":"oldValue" },
    "1": { "test": "changeMe" ,"notToBeChanged":"oldValue" },
    "2": { "test": "changeMe" ,"notToBeChanged":"oldValue" }
  },
  "1": {
    "0": { "test": "changeMe" ,"notToBeChanged":"oldValue" },
    "1": { "test": "changeMe" ,"notToBeChanged":"oldValue" },
    "2": { "test": "changeMe" ,"notToBeChanged":"oldValue" }
  },
  "2": {
    "0": { "test": "changeMe" ,"notToBeChanged":"oldValue" },
    "1": { "test": "changeMe" ,"notToBeChanged":"oldValue" },
    "2": { "test": "changeMe" ,"notToBeChanged":"oldValue" }
  }
}
};

Answer 1

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app-test',
    templateUrl: './test.component.html',
    styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {

    constructor() { }
    obj = <any>{};
    ngOnInit() {
        this.test();
    }

    test() {
        for (let i = 0; i < 8; i++) {
            this.obj[i] = {test: 'Whoever'};
        }
        console.log(this.obj);
    }
}

Answer 2

Ваша проблема заключалась в том, что вы не можете установить свойство неопределенного.(см. журнал консоли, чтобы увидеть это).Никогда не кодируйте длину, которую вы хотите повторить, это не очень хорошая практика.Кроме того, не используйте var больше.Мы находимся в эпоху ES6 +, где мы используем let и const

  test() {
    let obj :  Result;
    obj = {test:'ahuevo'};
    for ( let i = 0; i <= Object.keys(this.expectedResult).length-1; i++) {
      this.objs[i] = obj;
    }
  }

Я тоже создал взаимодействие

export interface Result {
  test: string;
}

Посмотритек этому стеку:

https://stackblitz.com/edit/mavvtogotest-enl8f3

Answer 3

Если вы видите консоль, вы видите эту ошибку там

TypeError: Невозможно установить свойство 'test' из неопределенного

Что означает, когда вы делаете this.obj[i].testthis.obj[i] не определено.Для решения проблемы воспользуйтесь приведенным ниже кодом.также я набрал ваш obj, чтобы получить возможность проверки типов.

  obj : {[key:string]: {test: string}} = {};
  test() {
    for (var i = 0; i <= 7; i++) {
      // how do i write this line
      this.obj[i] = { test : "Whoever" }
    }
  }

Обновление на основе комментариев

Если вы хотите обновить существующие элементы в вашем объекте, вы можете использовать следующий кодпоэтому он не будет перезаписан, если там были и другие свойства

решение 1

  this.obj[i] = Object.assign({} ,this.obj[i], { test : "Whoever" });

решение 2

  if (this.obj[i] == null) { this.obj[i] = {};}
  this.obj[i].test = "Whoever";