Question

我是Angle 4的新手，需要帮助，当在下拉列表中选择了text（comment）并单击了add按钮时，我有一个下拉列表和一个添加按钮，我需要在下拉菜单下动态显示带有删除按钮的所选注释如果用户不想使用该注释，则可以稍后将其删除。请帮助

Answer 1

template.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

单击添加按钮时，使用删除按钮动态创建文本Angular 4

1 个答案: