将多个字符串输入字符串数组Angular2

Question

我是 Angular 的新手，我正在创建食谱页面。我的 API 部分都设置好了，现在需要使用 angular.

将我的数据输入到 API

我有一个食谱界面，如下所示：

export interface Recipe {
    directions: string[];
    reviews: {
        _id: string,
        description: string,
        rating: string,
        date: string,
        user: string,
        __v: number,
        createDate: string
    }[];
    _id: string;
    name: string;
    description: string;
    image: string;
    prepTime: number;
    cookTime: number;
    ingredients: {
        _id: string,
        name: string,
        amount: string
    }[];
    __v: number;
}

而且我对如何将多个字符串输入到描述数组中感到困惑（以及如何将多个成分输入到其对应的数组中）。

这是我目前 html 中的内容。我在想我需要做一些类似 ngFor 或 ngIf 的事情，但我不知道该怎么做：

<div class="modal-header">
    <h4 class="modal-title pull-left">Create a New Recipe</h4>
    <button type="button" class="close pull-right" aria-label="Close" (click)="bsModalRef.hide()">
        <span aria-hidden="true">&times;</span>
    </button>
</div>
<div class="modal-body">
    <div>
        Id: {{recipe._id}} <br>
        Name: <input [(ngModel)]="recipe.name"><br>
        Description: <input [(ngModel)]="recipe.description"><br>
        Image URL: <input [(ngModel)]="recipe.image"><br>
        Prep Time: <input [(ngModel)]="recipe.prepTime"><br>
        Cook Time: <input [(ngModel)]="recipe.cookTime"><br><br>
<!--        ngFor here? or ngIf? -->
        Ingredients: <br>
        Id: {{recipe.ingredients._id}} <br>
        Name: <input [(ngModel)]="recipe.ingredients.name"><br>
        Amount: <input [(ngModel)]="recipe.ingredients.amount"><br><br>
        <!--        ngFor here? How do I access the Ingredient to add?-->
        Directions:<input [(ngModel)]="recipe.directions">
    </div>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-primary" (click)="createRecipe()">Submit</button>
    <!--    <button [routerLink]="['/home']">Cancel</button>-->
    <button type="button" class="btn btn-danger" id="closeModal" (click)="onCloseModal()">Cancel</button>
</div>

我该怎么做？ TIA！

Answer 1

希望这对您有所帮助。如果还需要任何其他信息，请告诉我。

   <div>
        Id: {{recipe._id}} <br>
        Name: <input [(ngModel)]="recipe.name"><br>
        Description: <input [(ngModel)]="recipe.description"><br>
        Image URL: <input [(ngModel)]="recipe.image"><br>
        Prep Time: <input [(ngModel)]="recipe.prepTime"><br>
        Cook Time: <input [(ngModel)]="recipe.cookTime"><br><br>
       <ng-container *ngFor="let ingredient of recipe.ingredients; let i = index">
        Ingredients: <br>
        Id: {{ingredient ._id}} <br>
        Name: <input [(ngModel)]="ingredient.name" [name]="'ingname'+i"><br>
        Amount: <input [(ngModel)]="ingredient.amount" [name]="'ingamnt'+i"><br> 
        <br>
        </ng-container>
        <!--        ngFor here? How do I access the Ingredient to add?-->
       <ng-container *ngFor="let direction of recipe.directions; let i = index">
        Directions:<input [(ngModel)]="recipe.directions[i]" [name]="'direction'+i">
        </ng-container>
    </div>

Answer 2

给你。我还添加了添加和删除功能。

<div class="modal-body">
  <div>
    Id: {{recipe._id}} <br>
    Name: <input [(ngModel)]="recipe.name"><br>
    Description: <input [(ngModel)]="recipe.description"><br>
    Image URL: <input [(ngModel)]="recipe.image"><br>
    Prep Time: <input type="number" [(ngModel)]="recipe.prepTime"><br>
    Cook Time: <input type="number" [(ngModel)]="recipe.cookTime"><br><br>
    Ingredients: <button type="button" class="btn btn-primary" (click)="addIngredient()">Add</button>
    <br><br>
    <ng-container *ngFor="let ingredient of recipe.ingredients; let i = index;">
      Id: {{recipe.ingredients[i]._id}}
      <button type="button" class="btn btn-primary" (click)="removeIngredient(i)">Remove</button>
      <br>
      Name: <input [(ngModel)]="recipe.ingredients[i].name"><br>
      Amount: <input [(ngModel)]="recipe.ingredients[i].amount"><br><br>
    </ng-container>
    <br>
    Directions: <button type="button" class="btn btn-primary" (click)="addDirection()">Add</button>
    <br><br>
    <ng-container *ngFor="let direction of recipe.directions; let i = index;">
      <input [(ngModel)]="direction" (change)="recipe.directions[i] = direction">
      &nbsp;<button type="button" class="btn btn-primary" (click)="removeDirection(i)">Remove</button>
      <br><br>
    </ng-container>
    <br><br>
  </div>
</div>

在 Stackblitz 查看工作演示。

将多个字符串输入字符串数组Angular2

Inputting multiple strings into a string array Angular2

arrays

interface

bootstrap-modal

ngfor

angular