Question

我正在使用Angular 4并通过使用Renderer2单击按钮动态创建文本框。我首先在一个虚拟项目上尝试过它并且效果很好但是当我把代码放在我的真实项目中时它不会工作并且控制台上没有错误我已经检查过该函数是否触发了其中的console.log和函数正在触发，并且在控制台中显示消息，但文本框创建代码不起作用。任何人都可以帮助我吗？

输入脚本功能

<button class="btn btn-success" (click)="addfield()" >Add New Fiels +</button>

Html代码

extension UIView
{
    func roundCorners(corners: UIRectCorner, radius: CGFloat)
    {
        let bounds = self.bounds
        let maskPath = UIBezierPath(roundedRect: bounds, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius))
        let maskLayer = CAShapeLayer()
        maskLayer.frame = bounds
        maskLayer.path = maskPath.cgPath
        self.layer.mask = maskLayer
    }
}

class CustomCell: UITableViewCell
{
    @IBOutlet weak var customView: UIView!

    override func awakeFromNib()
    {
        super.awakeFromNib()
        self.customView.layer.cornerRadius = 10.0
        self.customView.roundCorners(corners: [.topRight], radius: 35.0)
    }
}

Answer 1

<div id="textboxes"></div>
<button class="btn btn-success" (click)="addfield()" >Add New Fiels +</button>

//

constructor(private renderer: Renderer2) {
}

addfield()  {
....
const textboxes = document.querySelector('#textboxes'); //to get element
this.renderer.addClass(textboxes , "col-md-6"); //this is for add class 
let divel= this.renderer.createElement('div'); //this is for create an element 
this.renderer.appendChild(textboxes, divel);   //this is for append a child element 

 }

Answer 2

您的代码绝对没问题，唯一的问题是您没有附加动态创建 ui的元素

组件：

constructor(private renderer:Renderer2, private el: ElementRef ) {}

addfield()  {
    ....
    const textboxes = document.getElementById('textboxes');
    this.renderer.appendChild(textboxes, div);
}

模板：

<div id="textboxes"></div>

<button class="btn btn-success" (click)="addfield()" >Add New Fiels +</button>

以下是工作演示的链接：

https://stackblitz.com/edit/angular-dynamic-textbox

Answer 3

试试这样：

缺少以下行来添加动态文本框this.renderer.appendChild(this.el.nativeElement, div);

addfield() {
    const div = this.renderer.createElement('div');
    const input = this.renderer.createElement('input');

    this.renderer.appendChild(div, input);
    this.renderer.addClass(div, 'col-md-6');
    this.renderer.addClass(div, 'col-sm-6');
    this.renderer.addClass(div, 'col-xs-12');

    this.renderer.addClass(input, 'form-control');
    this.renderer.addClass(input, 'col-md-7');
    this.renderer.addClass(input, 'col-xs-12');

    this.renderer.appendChild(this.el.nativeElement, div);
}

无法使用angular4中的Renderer2创建动态文本框

3 个答案: