访问第二级属性的FormBuilder (点符号)

Question

我正在使用Angular2的FromBuilder构建一个查询，然后发送到我的后端(MongoDB)。问题是，我正在尝试访问二级属性。例如，我有一首歌，里面有一个流派数组。例如，我想访问genres.hipHop，但是我不能将表单组设置为genres.hipHop。我能做的就是用一个词。

下面是我想要构建的查询的示例

{
  "where": {
    "and": [
      {"genres.house": {"exists": "true"}}
    ]
  },
  "order": "created DESC"
};

我的FormBilder看起来像这样：

this.queryForm = this._formBuilder.group({
  where: this._formBuilder.group({
    and: this._formBuilder.array([
      this._formBuilder.group({
        genres : this._formBuilder.group({  <-- need it be genres.hipHop
          exists: true
        })
      })
    ]),
    order: 'created DESC',
  })
});

这将创建：

{
  "where": {
    "and": [
      {"genres": {"exists": "true"}} 
    ]
  },
  "order": "created DESC"
};

我不能在流派后面加上.hipHop。

我尝试将流派( hipHop )嵌套在流派中，但当我将其发送到我的后端时，它无法识别hipHop。这是构建的查询：

{ "where": { 
  "and": [ 
    { "genres": 
      { "hipHop": { "exists": true } } 
    } 
  ], 
  "order": "created DESC" } 
}

这是我得到的错误：

"MongoError: unknown operator: $hipHop\n 

下面是一个歌曲对象的示例：

{
    "title": "Sweet Talk feat. Quinn XCII (Evan Gartner Remix)",
    "artist": "Academy",
    "audio": "https://api.soundcloud.com/tracks/270500010/stream?client_id=90d140308348273b897fab79f44a7c89",
    "image": "https://i1.sndcdn.com/artworks-000168676452-qkxqul-t500x500.jpg",
    "download": "http://stereoload.com/academy/quinn-xcii-x-academy-sweet-talk-evan-gartner-remix",
    "url": "http://soundcloud.com/academy401/sweettalkremix",
    "created": "2016-12-13T09:21:28.071Z",
    "genres": {
      "hipHop": 30,
      "house": 30,
      "pop": 40
    },
    "rank": 0
  }

谢谢!

Answer 1

您是否尝试过将对象键定义为字符串"genres.hipHop"

this.queryForm = this._formBuilder.group({
  where: this._formBuilder.group({
    and: this._formBuilder.array([
      this._formBuilder.group({
        "genres.hipHop" : this._formBuilder.group({
          exists: true
        })
      })
    ]),
    order: 'created DESC',
  })
});

Answer 2

我认为你不能在这里使用点符号，因为它不是一个有效的键。

查看源代码中的这一行：

https://github.com/angular/angular/blob/2.4.1/modules/%40angular/forms/src/form_builder.ts#L75

它看起来像是在键上迭代来构建控件。由于您不能将"x.y“作为javascript中的键，因此此操作失败。

示例

var x = {y.z = "a"} //--> Uncaught SyntaxError: Unexpected token .

我认为你必须在你的风格FormGroup中创建另一组键--例如，其中一个键可以是hiphop。如果你想添加更多类型，这可能就是你想要做的事情:)

编辑：

示例--

this.queryForm = this._formBuilder.group({
  where: this._formBuilder.group({
    and: this._formBuilder.array([
      this._formBuilder.group({
        genres : this._formBuilder.group({
          hiphop : this._formBuilder.group({
              exists: true
          })
        })
      })
    ]),
    order: 'created DESC',
  })
});