Angular 4 - 单击按钮时希望附加文本区域以动态查看每个按钮单击

Question

实际上我想在按钮单击视图上创建一个文本区域。我对角度 4 没有太多想法。要求是每次单击按钮时，我都想在视图中创建 textarea。应该有多个带有十字按钮的文本区域，因此如果不需要，我可以删除文本区域。

不幸的是，我还没有尝试任何代码，也没有找到任何解决方案来实现它。但这是我在 Angular 4 中创建的要求。任何帮助都是显而易见的。

Answer 1

以下代码将满足您在单击按钮时生成文本区域以及删除特定文本区域的要求。

<div style="padding-top: 200px">
<button (click)="addTextarea()">Add Textarea</button>
<form>
    <div *ngFor="let textarea of textAreasList; let textarea_index= index">
        <textarea name="{{textarea}}"></textarea>
        <button (click)="removeTextArea(textarea_index)">Remove</button>
    </div>
</form>

将上面的代码放在 .html 文件中。

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

@Component({
    selector: 'home',
    templateUrl: 'home.component.html',
    styleUrls: ['home.component.css']
})
export class HomeComponent {

    textAreasList:any = [];

    addTextarea(){        
        this.textAreasList.push('text_area'+ (this.textAreasList.length + 1));
    }


    removeTextArea(index){
        this.textAreasList.splice(index, 1);
    }

}

将上述代码放在 .ts 文件中。如果您还有其他困难，请告诉我。