Question

实际上，我想在按钮单击视图上创建一个文本区域。我对angular 4没什么想法，要求是每次单击按钮时我都想在视图上方创建textarea。应该有多个带有十字按钮的文本区域，这样我就可以在不需要的情况下删除该文本区域。

不幸的是，我还没有尝试任何代码，也没有找到实现它的解决方案。但这是我创建角度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-在单击按钮时要附加文本区域以动态查看每个按钮单击

1 个答案: