Angular 4 - 在按钮点击时想要附加文本区域以便为每个按钮点击动态查看

Question

实际上我想在点击视图的按钮上创建一个文本区域。我对 angular 不太了解 4. 要求是每次单击按钮时我都想在视图上创建文本区域。应该有多个带有交叉按钮的文本区域，这样我可以在不需要时删除文本区域。

不幸的是，我还没有尝试任何代码，也没有找到任何解决方案来实现它。但这是我在 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 文件中。如果您还有其他困难，请告诉我。

Angular 4 - 在按钮点击时想要附加文本区域以便为每个按钮点击动态查看

Angular 4 - On button click want to append textarea to view dynamically for each button click

html

ionic3

textarea

angular6

angular4-forms