динамически создавать текст с кнопкой удаления при нажатии кнопки добавления Angular 4

Question

Я новичок в angular 4 и мне нужна помощь. У меня есть выпадающий список и кнопка добавления, когда в выпадающем списке выбран текст (комментарий) и нажата кнопка добавления. Мне нужно динамически показать выбранный комментарий с кнопкой удаления под выпадающий список для пользователя, чтобы удалить его позже, если он / она не хочет использовать этот комментарий. пожалуйста помогите

Answer 1

шаблон. html

<div class="input-ct">
  <select [(ngModel)]="selectedComment">
    <option *ngFor="let comment of availableComments" [ngValue]="comment">{{comment}}</option>
  </select>
  <button (click)="addComment()">Add</button>
</div>

<div *ngFor="let comment of comments;let i=index" class="row">
  <div>{{comment}}</div>
  <button (click)="delete(i)">X</button>
</div>

component.ts

import { Component } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  selectedComment: string = "";

  availableComments: any[] = [
    "Coment 1",
    "Coment 2",
    "Coment 3",
    "Coment 4",
    "Coment 5"
  ];

  comments: any[] = [];

  addComment() {
    if(this.selectedComment && this.comments.indexOf(this.selectedComment)===-1){
      this.comments.push(this.selectedComment);
    }
  }

  delete(index) {
    this.comments.splice(index,1);
  }
}

Проверьте образец https://stackblitz.com/edit/angular-sb3ltn