Question

我有一个JSON对象，我想使用Angular将属性的值赋予4个变量，如下所示：

authorText : string;
titleText : string;
durationText : string;
genreText : string;

这是JSON：

"{"n":{  
   "_id":1101,
   "labels":[  
      "Song"
   ],
   "properties":{  
      "duration":"214000",
      "author":"Shawn Mendes",
      "genre":"pop",
      "title":"In My Blood"
   }
}
}"

我尝试使用此方法和类似的解决方案：

Object.keys(editData).forEach(function (key) {
  console.log(key);
  if(key === "author"){
     this.authorText = editData[key];
  }
  console.log( key , editData[key] );
});

但是由于某种原因，密钥始终为0。

编辑添加了JSON的图片：我之前打印过的字符串如下：将其保存为全局变量，然后使用JSON.stringify(temp1);。

Answer 1

您可以使用此：

const { duration, author, genre, title } = this.editData[0].n.properties;
this.song = {
    authorText: author,
    titleText: title,
    durationText: duration,
    genreText: genre
};

在这里，我们是destructuring键的属性，properties只是将它们逐一分配给歌曲Object的键。

一个更好的选择是将字段命名为duration，author，genre和title。然后，您可以简单地执行以下操作：

export interface Song {
  author: string;
  title: string;
  duration: string;
  genre: string;
}

在您的函数中：

this.song = { ...editData[0].n.properties };

在这里，我们正在使用扩展运算符（...）来扩展属性对象的键，并将它们分配给组件类的song属性。

Here's a Sample StackBlitz for your ref.

Answer 2

您可以这样做：

this.song = this.editData.n.properties;

我在这里展示了一个闪电战：https://stackblitz.com/edit/angular-udmdqr

基本代码在这里：

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

@Component({
  selector: 'hello',
  template: `<h1>Hello {{song.author}}!</h1>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent {
  song: Song;
  editData = {
    "n": {
      "_id": 1101,
      "labels": [
        "Song"
      ],
      "properties": {
        "duration": "214000",
        "author": "Shawn Mendes",
        "genre": "pop",
        "title": "In My Blood"
      }
    }
  }

  constructor() {
    this.song = this.editData.n.properties;
  }
}

export interface Song {
  duration: string;
  author: string;
  genre: string;
  title: string
}

使用Angular解析JSON项目

2 个答案: