小编vur*_*yss的帖子

所以我有一个包含 3 个控件的 FormGroups 的 FormArray。从视觉上看，它看起来像一个每行有 3 个输入的表格。这是它的外观：

我希望当用户按下 Tab 键或在行中的最后一个输入处输入时 - 在它之后添加一个新的空行。所以我添加(keydown)="addRow($event.keyCode, i)"到最后一个输入并创建了函数：

public addRow(keyCode, index)
{
    if (keyCode !== 9 && keyCode !== 13) {
        return;
    }

    let formItems = this.form.get('items') as FormArray;

    formItems.insert(
        index + 1,
        this.formBuilder.group({
            'start': ['', Validators.required],
            'title': ['', Validators.required],
            'category': [''],
        })
    );
}

推送 FormGroup 后，我可以在表单数组中正确看到控件，但是视图更新奇怪。例如，在第一行的最后一个输入上按 Tab 后，我得到以下结果：

最后一行被删除，我在第一行之后得到两个空行。我不知道为什么。这是推送后的 FormArray，那里的项目正常：

这是视图代码：

<div formArrayName="items">
    <div *ngFor="let item of form.controls.items.controls; let i=index" [formGroupName]="i" class="row item-index-{{ i }}">
        <div class="form-group">
            <div class="col-sm-2">
                <input …

Angular2:

我正在尝试修改innerHTML已应用自定义指令的标记的内容/ .

前言:

我正在尝试为我的项目设计一个翻译功能,它从DB中提取数据,将其加载到本地对象并更新所有翻译的对象值.首先我尝试使用管道,但除非管道不纯(性能下降) - 我无法在新翻译到达时更新值(类似这个问题).下一步是该指令,尽管它在代码中具有更大的占用空间.

我尝试了什么:

我有这样的指示:

@Directive({
    selector: '[i18n]'
})
export class I18nDirective
{
    @Input() set i18n(key: string) {
        this.el.nativeElement.innerHTML = Translations.get(key);
        this.viewContainer.element.nativeElement.innerHTML = Translations.get(key);
        this.templateRef.elementRef.nativeElement.innerHTML = Translations.get(key);
        this.renderer.setElementProperty(this.el.nativeElement, 'innerHTML', Translations.get(key));
        this.renderer.setElementProperty(this.viewContainer.element.nativeElement, 'innerHTML', Translations.get(key));
        this.renderer.setElementProperty(this.templateRef.elementRef.nativeElement, 'innerHTML', Translations.get(key));

        this.viewContainer.createEmbeddedView(this.templateRef);
    }

    public constructor(
        private el: ElementRef,
        private templateRef: TemplateRef<any>,
        private viewContainer: ViewContainerRef,
        private renderer: Renderer,
    ) { }
}

我已经尝试了上述所有设置变量的指令下的标签内容,但没有任何成功.

这是标签:

<span class="..." *i18n="'translation-page-title'"></span>

如何动态更改包含指令的标记的innerHTML？并且可能在语言改变时动态地改变它？

提前致谢!