时间戳

首页 > 解决方案 > ngModel 不会在来自字符串的输入上呈现

javascript - ngModel 不会在来自字符串的输入上呈现

问题描述

这是我的最终目标：

我正在尝试从 JSON 文件呈现输入字段。这是一个示例字符串：

{  
    “身份证”：1，
    "value": "人生的答案是：(INPUT FIELD HERE WITH ngModel)。更多内容..."
}

（如果没有 Stack 将其删除，则无法输入输入字段，但输入字段当然会被输入）

现在，我确实使用 innerHTML 显示输入字段，并使用安全管道清理 HTML，但 ngModel 被忽略。当我控制台记录表单结果时，没有两种方式绑定发生。我想也许我需要在加载视图后重新渲染字段，但我不知道如何实现。（模糊）之类的其他东西也被完全忽略了。

我真的希望有人知道如何做到这一点。我的 JSON 文件将有一个包含大量 HTML 标记和多个输入字段的值。

我的项目是一个 ionic3 应用程序。

标签： javascriptangularionic-frameworkionic3

解决方案

编辑后的帖子

Angular 组件、指令、事件和属性绑定仅适用于静态添加到组件模板的 HTML。

使用 [innerHTML]="..." 你可以将 HTML 添加到 DOM，但 Angular 不会关心它包含什么 HTML，除了清理。

最好的选择是在运行时使用组件模板编译 HTML。

话虽如此，我已经按照本文末尾提到的参考资料创建了一个演示应用程序。这将满足您的要求

https://stackblitz.com/edit/dynami-template-ionic

下面的代码

主页.ts

import {Compiler, Component, NgModule, OnInit, ViewChild,
  ViewContainerRef} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {FormsModule} from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html'
})
export class App implements OnInit {
  @ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef;

  constructor(private compiler: Compiler) {}
  section={}
  ngOnInit() {
    this.addComponent(`<p>Sed ut perspiciatis unde omnis <input type="text" [(ngModel)]="section.answer1" name="answer1"/> sit voluptatem accusantium doloremque laudantium.</p><p>Totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt <input type="text" [(ngModel)]="section.answer2" name="answer2"/>`,
      {
        section:this.section,
        increaseCounter: function () {
          this.counter++;
        }
      }
    );
  }

  submitAnswers(answers){
    console.log(answers);
  }

  private addComponent(template: string, properties: any = {}) {
    @Component({template})
    class TemplateComponent {}

    @NgModule({imports: [ FormsModule ],declarations: [TemplateComponent]})
    class TemplateModule {}

    const mod = this.compiler.compileModuleAndAllComponentsSync(TemplateModule);
    const factory = mod.componentFactories.find((comp) =>
      comp.componentType === TemplateComponent
    );
    const component = this.container.createComponent(factory);
    Object.assign(component.instance, properties);
    // If properties are changed at a later stage, the change detection
    // may need to be triggered manually:
    // component.changeDetectorRef.detectChanges();
  }
}

主页.html

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
<h1>Dynamic template:</h1>
<h2>Workbook</h2>
  <form (ngSubmit)="submitAnswers(section)">
  <div #container></div>
  <h3>This input below is hard coded in the view and works perfectly. Inputs from string are ignored.</h3>
    <input type="text" [(ngModel)]="section.answer3" name="answer3">
    <br />
    <p><em>** Answers are logged in console **</em></p>
    <button ion-button type="submit" block>Submit Answers</button>
  </form>
</ion-content>

参考：

如何使用/创建动态模板来使用 Angular 2.0 编译动态组件？

https://stackoverflow.com/a/39507831/6617276

https://stackoverflow.com/a/46918940/6617276

推荐阅读