Question

我有一个代码，其中我已从URL中检索json数据，并且当前正在尝试从contact.component.ts文件加载数据到contact.component.html文件。现在我已经创建了一个 EscapeHtmlFile并尝试相应地渲染我的数据，但没有得到所需的结果。

我已按照一些教程的建议添加了DomSanitizer，但没有一个适合我的问题。

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({ name: 'keepHtml', pure: false })
export class EscapeHtmlPipe implements PipeTransform {
 constructor(private sanitizer: DomSanitizer) {
 }

 transform(content) {
   return this.sanitizer.bypassSecurityTrustHtml(content);
 }
}   


import { Component, OnInit, Pipe } from '@angular/core';
import { Http } from '@angular/http';

@Component({
 selector: 'app-contacts',
 templateUrl: './contacts.component.html',
 styleUrls: ['./contacts.component.css']
})
@Pipe({name: 'keepHtml'})
export class ContactsComponent implements OnInit {
 private contactsUrl = 'https://public-  api.wordpress.com/rest/v1.1/sites/vocon-it.com/posts';

 constructor(http: Http) {
   http.get(this.contactsUrl).subscribe(result => {
     this.posts = result.json().posts;
   }, error => console.error(error));    
  }

 ngOnInit() {
   // this.getContacts();
 }

 posts: string[];

 data_template = '<div class="overview-box"><img src="{{post.author.profile_URL}}" class="img-thumbnail" alt="">'
 +'<h2>{{post.author.first_name}}</h2><hr><p>{{post.author.email}}</p><p>{{post.author.nice_name}}</p>'
 +'<a href="#"><i class="fa fa-angle-right"></i> &nbsp;Read More</a></div>';

}

我希望实际输出将数据呈现为{{post.author.first_name}}中的值，但我一直在获得与输出相同的输出而不是值。

编辑-代码格式。

如何将html字符串从component.ts文件渲染为component.html文件Angular 6？

0 个答案: