Question

我想获取数据集中的所有thumbnailURL，并将它们添加到数组中。

我尝试过.map和.push，并考虑过要因为它是一个对象而必须对其进行更改，所以我将向您展示数据集，并向您展示我的方法：

为了清楚起见，我想检查每个角色数组，并从每个帐户获取缩略图URL并将其添加到数组中：

在我的代码段中，它可以正常工作，并且与我的实际代码，数据和逻辑相同，但是在我的真实代码中，我得到了错误：

this.participantImage.push is not a function

数据：

session =   {
"id": "34343434343",
"endDatetime": "2017-01-19T18:00:00.000+0000",
"location": "frfefef-4354, Congress Centre, Sanddadadaada",
"name": "jeffs's Next Frontier",
"photoURL": "25345345345",
"roles": [{
        "account": {
            "id": "24234324",
            "fullName": "darren Lacy",
            "thumbnailURL": "thumbnail image 1232343433"
        }
    },
    {
        "account": {
            "id": "0056565",
            "fullName": "jeff Lacy",
            "thumbnailURL": "thumbnail image 000000000"
        }

    }
]
}

工作版本：

    session =   {
	"id": "34343434343",
	"endDatetime": "2017-01-19T18:00:00.000+0000",
	"location": "frfefef-4354, Congress Centre, Sanddadadaada",
	"name": "jeffs's Next Frontier",
	"photoURL": "25345345345",
	"roles": [{
			"account": {
				"id": "24234324",
				"fullName": "darren Lacy",
				"thumbnailURL": "thumbnail image 1232343433"
			}
		},
		{
			"account": {
				"id": "0056565",
				"fullName": "jeff Lacy",
				"thumbnailURL": "thumbnail image 000000000"
			}

		}
	]
    }
    
    
    participantImage = []
    
    for (var i = 0; i < session.roles.length; i++) {
      participantImage.push(session.roles[i].account.thumbnailURL)
    }
    console.log(participantImage)

我在代码中使用了此功能：

 participantImage = [];

  getParticipantDetails(session) {
console.log('CONSOLING SESSION AGAIN!!!!!!!!!' + JSON.stringify(session))
    for (var i = 0; i < session.roles.length; i++) {
      this.participantImage.push(session.roles[i].account.thumbnailURL)
    }
    return this.participantImage;
  }

这是相同的数据，有人知道为什么它不起作用吗？

在将缩略图解析到可以在其中进行迭代的组件时，我需要缩略图数组：

我的组件：

        <session-card>
          [participantImages]="getParticipantDetails(session)"
        </session-card>

解析到我的父组件

  @Input() participantImages?: any[] = [];


  <div class="Session-Participants">
  <div  *ngFor="let image of participantImages" >
      <img [src]='image' width=100px/>
  </div>

非常感谢您能提供帮助吗？

Answer 1

const thumbnails = session.roles.map(role => role.account.thumbnailURL);

// ["thumbnail image 1232343433", "thumbnail image 000000000"]

Answer 2

编辑：因此，使该答案更有用：

如果可以，请在HTML模板中查找函数调用。只需在其中放置一个断点，然后查看它们实际被调用的频率即可，这取决于您的功能，这可能会对性能产生巨大影响。
我最初的回答提到reduce()，这完全是过分的了。如果只想从数组中提取一些数据，map()几乎就是您所需要的。
这是一个非常主观的内容：您的代码表明participantImage是组件上的一个公共字段，通过getParticipantDetails调用而被更改，因此返回它毫无意义。实际上，整个功能可以由对map()的调用来代替。
为什么您的初始功能无法正常工作（可能）：由于您没有使用arrow function，因此必须谨慎使用this。在您的示例中，您可能传递了函数，从而改变了this的范围。因此，participantImages在该范围内不存在，因此是一个例外。

原始：不是您问题的直接答案，但是您可以使用map来避免头痛：

const session = {
  id: "34343434343",
  endDatetime: "2017-01-19T18:00:00.000+0000",
  location: "frfefef-4354, Congress Centre, Sanddadadaada",
  name: "jeffs's Next Frontier",
  photoURL: "25345345345",
  roles: [
    {
      account: {
        id: "24234324",
        fullName: "darren Lacy",
        thumbnailURL: "thumbnail image 1232343433"
      }
    },
    {
      account: {
        id: "0056565",
        fullName: "jeff Lacy",
        thumbnailURL: "thumbnail image 000000000"
      }
    }
  ]
};


const result = session.roles.map(x => x.account.thumbnailURL);

创建对象内嵌套数组某个字段的所有值的数组

2 个答案: