时间戳

首页 > 解决方案 > 更改嵌套对象的属性值 Angular 4+

angular - 更改嵌套对象的属性值 Angular 4+

问题描述

我正在尝试创建一个动态嵌套对象，但我无法更改我正在创建的属性的值

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

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

添加 stackblitz 以供参考。

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" }
  }
}
};

标签： angulartypescriptobject

解决方案

如果您看到控制台，您会在那里看到此错误

TypeError：无法设置未定义的属性“测试”

这意味着当你在做this.obj[i].test,this.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" }
    }
  }

根据评论更新

如果您想更新 obj 上的现有项目，您可以使用下面的代码，因此如果那里还有其他属性，它也不会覆盖

解决方案 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";

推荐阅读