HTML

Question

（Angular Version 5）

我正在尝试将动态对象作为特定值的存储。

“按人分组的价值”。像这样：

let store = {
  'groupA':{
    'personA': 1.0,
    'personB': 2.3,
    ...
  },
  'groupB':{
    'personA': 4.1,
    ...
  },
  ...
}

有了这个结构，我可以获得像store['groupA'][personB]

这样的特定值

其中groupId和personID是对象不存在的新键。

对于上述要求，直接向前[（ngModel）]将无效，因为未定义对象结构。即 <input [(ngModel)]="store[group.id][person.id]">不起作用，因为值和整个结构未定义。

我是否需要以特殊方式初始化结构或者将值绑定不同？

**我的主要问题是，我不知道给定的groupId是否有值。的？运算符(store?[group.id]?[person.id])应该可以解决我的问题，但它不能与[]表示法一起使用。

Answer 1

我创建了两个演示如何处理这个问题。希望你得到你想要的东西。

Demo

Answer 2

您可以这样做：

HTML

<input type="text" name="my-inp" (change)="chngVl($event,nuId,nuId1)">

TS

nuId = 'xxxx';
  nuId1 = 'xxxx1';

  store = {
    'groupA': {
      'personA': 1.0
    },
    'groupB': {
      'personB': 2.3
    },
    'groupC': {
      'personC': 4.1
    }
  };


chngVl(ev,nuId,nuId1){
    if(!this.store[nuId]){
      this.store[nuId] = {};
      this.store[nuId][nuId1] = ev.target.value;
    }else {
      this.store[nuId][nuId1] = ev.target.value;
    }

    console.log("store: ",this.store);
  }

Answer 3

更新

在看到你的评论之后，我意识到我误解了，但是更多逻辑

的概念相同

查看此演示：

https://stackblitz.com/edit/angular-7icspf

基本上，这适用于通过旧帖子中提到的Object.Keys以及地图进行动态循环。

首先，获取所需的所有密钥

export function getProject(){
return (dispatch, getState) => {
      return Project.readProject()
                        .then((response)=> {dispatch(getProjectAction(response))})
                        .catch((error)=>dispatch(getError(error)))
}
}


export function createProject(p){
return (disp, getState) => {
      return Project.createProject(p)
                        .then(response=> {disp(createProjectAction(response))})
                        .catch((error)=>disp(getError(error)))
}
}

在html中遍历它们

let keys = Object.keys(store);
this.keysLvl1 = keys;
this.keysLvl2 = keys.map(x => Object.keys(store[x]));

我制作了一个演示，但您可以通过以下方式访问Javascript对象：

<div *ngFor="let key of keysLvl1;let i = index;">
<div *ngFor="let key2 of keysLvl2[i];">
    {{key}}:{{key2}} <input type="text" [(ngModel)]="store[key][key2]" />
</div>
</div>

使用您自己的JSON结构检查演示以获取完整示例。

Demo

另外..当使用JS对象进行动态加载时，我发现了非常有用的键，请在此处阅读：Object.keys()

Answer 4

你的问题有点模糊。但我认为你想在绑定之前使用ternary operator检查值，如果没有其中一个属性的值？

我认为这实际上可以使用*ngIf这样实现;因为当你想到它时，如果没有任何东西需要绑定，那么输入字段是没有意义的......对吗？

<input *ngIf="store ? (store[group.id] ? (store[group.id][person.id] ? true : false) : false) : false " 
    [(ngModel)]="store[group.id][person.id]">

我知道这看起来很可怕，但是如果你愿意的话，你可以将它放入一个函数和查询中。

这是一个具有类似概念的Javascript示例：

＆＃13;

// when exists:
let a = {b: {c: "hello"}};
let evaluation = a ? (a.b ? (a.b.c ? a.b.c : false) : false) : false;
console.log(evaluation);
// when does not exist:
a = {b: {d: "hello"}};
evaluation = a ? (a.b ? (a.b.c ? a.b.c : false) : false) : false;
console.log(evaluation);

＆＃13;

Angular - 将输入绑定到动态对象中的值

4 个答案:

HTML

TS