Question

我正在尝试制作食谱应用程序，我想显示存储在Firestore数据库中的配料，但是当我使用{{ recipe.ingredients }}时，显示的项目之间没有空格，我需要空间，该怎么办？

我知道使用javascript可以使用.join（“，”），但我不知道如何在ionic中做到这一点

<ion-card *ngFor="let recipe of recipes">
   <div>{{ recipe.ingredientes }}</div>
</ion-card>

就像“洋葱，鸡蛋，肉”，我想要“洋葱，鸡蛋，肉”

Answer 1

如果recipe.ingredientes是一个数组，那么您应该可以使用：

recipe.ingredientes.join(", ")

Answer 2

从配方数组中获取所有成分。

在component.ts文件中：

function add_people(data) {
    var element = document.getElementById('people');

    var list = "<ul>";
        for (var i=0; i<data.length; i++) {
            list += `<li>
                      ${data[i].name}
                      <img src="${data[i].picture}" />
                    </li>`
        }
    list += "</ul>";

    element.innerHTML = list
}

在html文件中，显示离子卡内的字符串：

this.ingredientes = recipes.map((recipe) => (recipe.ingredientes));
this.ingredientesString = ingredientes.join(', ');

如何显示在项目之间留有间隔的数组Firestore

2 个答案: