时间戳

首页 > 解决方案 > 使用 Microsoft Bot Framework 动态创建具有不同内容的自适应卡片

javascript - 使用 Microsoft Bot Framework 动态创建具有不同内容的自适应卡片

问题描述

我正在尝试为我的 Azure 聊天机器人创建一个自适应卡片轮播。

我有一个对象列表，对于这个列表中的每个项目，我想创建一个新的自适应卡。

这是我发送卡片轮播的地方：

await step.context.sendActivity({
            text: "I've found the following job positions:",
            attachments: this.createCards(positions),
            attachmentLayout: AttachmentLayoutTypes.Carousel
        });

这是createCards：

const JobCard = require('../../resources/jobCard.json');
createCards(positions) {
    let cards = [];         
    positions.forEach(function(position) {
        let cardJson = JobCard;
        cardJson.body[0].columns[0].items[0].text = position.name;
        cardJson.body[0].columns[0].items[1].text = position.activities;  
        let adaptativeCard = CardFactory.adaptiveCard(cardJson);
        cards.push(adaptativeCard)
    })
    return cards;}

问题是：所有卡片都显示相同的内容。显示的卡片数量与 的数量相应positions，但所有卡片都显示position.name和position.activities的第position一个positions。

问题：我尝试动态创建卡片的方式有什么问题？我怎样才能成功地做到这一点？

感觉就像我在这里遗漏了一些非常简单的东西，但我找不到导致问题的原因。

标签： javascriptbotframework

解决方案

您所有的卡片引用都指向同一个对象，因此当您修改其中一个时，您最终会更改所有这些。为防止出现这种情况，请在每次制作新卡片时创建一张卡片副本。您可以使用它JSON.parse(JSON.stringify(JobCard))来创建 JSON 对象的深层副本。这是您的代码的外观。

createCards(positions) {
    let cards = [];         
    positions.forEach(function(position) {
        let cardJson = JSON.parse(JSON.stringify(JobCard));
        cardJson.body[0].columns[0].items[0].text = position.name;
        cardJson.body[0].columns[0].items[1].text = position.activities;  
        let adaptativeCard = CardFactory.adaptiveCard(cardJson);
        cards.push(adaptativeCard)
    })
    return cards;
}

希望这可以帮助！

推荐阅读