Как отобразить массив firestore с пробелом между предметами

Question

Я пытаюсь создать приложение для рецептов и хочу показать ингредиенты, хранящиеся в базе данных Firestore, но когда я использую {{ recipe.ingredients }}, элементы отображаются без пробелов между элементами, и мне это нужно с пробелом, как я могу это сделать?

Я знаю, что с javascript я могу использовать .join (","), но я не могу понять, как это сделать в ионном

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

Это как "лук, яйцо, мясо", а я хочу "лук, яйцо, мясо"

Answer 1

Получить все ингредиенты в виде массива из массива recipes.

В файле component.ts:

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

В html-файле отобразить строку внутри ионной карты:

<ion-card>
   <div>{{ ingredientesString }}</div>
</ion-card>

Answer 2

Если recipe.ingredientes - это массив, то вы можете использовать:

recipe.ingredientes.join(", ")