Question

让我说我从MongoDB中检索[string]的HTML代码，例如

["<div class=list-group-item><span><label>Enter text</label> : <input type =text placeholder=value [(ngModel)]=text0 index=gen > </span> </div>",
"<div class=list-group-item><span><label>Enter text</label> : <input type =text placeholder=value [(ngModel)]=text1 index=gen > </span> </div>"]

我正在处理我对它进行消毒并希望将其变成具有完整功能的表单！

我的HTML代码：

<p>
  DATA:
{{this.id}}
</p>
<span *ngFor="let item of this.code;let x= index;"><div  [innerHTML]="sanitizer.bypassSecurityTrustHtml(this.code[x])" ></div>
  {{this.item}}<br>
  WORK GOdDAMMIT!!: {{text0}}

</span>

我对text0进行了硬编码，看它是否有效！

现在，你能给我一个关于如何访问ngModel值的基本示例，以便我可以做到吗？

在AngularJS（v1.6）中，我设法使用名为bind-html-compile的外部模块

任何小例子都会非常有益！

如果你想查看我的component.ts，请点击这里：

@Component({
  selector: 'app-form-show',
  templateUrl: './form-show.component.html',
  styleUrls: ['./form-show.component.css'],
   providers: [FormShowService]
 })
export class FormShowComponent implements OnInit {
  private id:string;
  private code:string;
  //private htmlCode :HTML
  constructor(
    private http: Http,
    private router: Router,
    private route : ActivatedRoute,
    private sanitizer: DomSanitizer
  ) {

  }

  ngOnInit(){
      //console.log(this.Code)
      console.log(this.route.params['value'].id);
      this.id=this.route.params['value'].id
      this.getID();
  }

getID(){
  let jsonData : JSON;
  jsonData=JSON.parse('{"data" :"'+ this.id +'"}');

  return this.http.post('/api/getInfo', jsonData).subscribe(
     res => {res.json();
       console.log(res.json());
       let resProc = res.json();
       console.log(resProc);
       this.code=resProc[0].script;
       console.log(this.code);
      });

}



}

谢谢！

Answer 1

对于你和任何可能遇到类似情况的人，我有一个更简单的解决方案。我试过Viewcontainerreff，但无济于事。在搜索npm.js之后，我相信你只需要这个包！

The Fantabulous ng-dynamic

它的用法也非常简单：

<div *dynamicComponent="your_html_string">loadin</div>

它适用于angular4指令，是您出于此目的所需的全部内容！

祝你好运

~Ronny McNamara

用于输入组件的Angular TypeScript innerHTML绑定

1 个答案: