从JSON响应中分离HTML内容和文本以在Angular 2中使用不同的地方 - Typescript

Question

嗨，我在前端使用Angular 2和wordpress rest api后端。 我收到了来自服务的json响应。但Wp休息api发送内容与HTML标签和图像。我是unabale拆分它并在我的HTML中使用它。 我想用图像和文字应该在不同的地方。我还需要从内容中删除

标记。

服务一样：

@Injectable() 
export class VtkraHomeService { 
    private url = 'http://myapplication.com/wp-json/wp/v2/posts'; 
    private headers = new Headers({'Content-Type': 'application/json'}); 
    constructor (private http : Http){ 

    } 

    getFeeds(){ 
     return this.http 
     .get(this.url) 
     //.then((res) => res.json); 
     .map((res: Response) => res.json()); 
    } 

和ComponentLike：

export class HomeComponent implements OnInit { 

    homefeed: any; 
    showLoader = false; 

    constructor(private VtkraHomeService: VtkraHomeService) { } 

getHomeFeeds(){ 
    this.showLoader = true; 
    this.VtkraHomeService 
    .getFeeds() 
    .subscribe(data => { 
    this.homefeed = data; 
    console.log(this.homefeed); 
    this.showLoader = false; 
    }); 
} 



    ngOnInit(){ 
    this.getHomeFeeds() 
    } 

} 

我得到一个JSON响应是这样的：

[ 
     { 
      id: 15953, 
      date: '2016-10-22T07:55:34', 
      title: { 
        rendered: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum', 
        protected: false 
       }, 
      content: { 
        rendered: '<p><img src="https://www.w3schools.com/css/paris.jpg" alt="w3c" />Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. <a href="htts://www.w3schools.com/css/paris">Link</a></P>', 
        protected: false 
        }, 
      link: 'htts://www.w3schools.com/css/paris', 
      type: 'post', 
      author: 1 
     }, 
{ 
      id: 15954, 
      date: '2016-10-22T07:55:34', 
      title: { 
        rendered: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum', 
        protected: false 
       }, 
      content: { 
        rendered: '<p><img src="https://www.w3schools.com/css/paris.jpg" alt="w3c" />Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. <a href="htts://www.w3schools.com/css/paris">Link</a></P>', 
        protected: false 
        }, 
      link: 'htts://www.w3schools.com/css/paris', 
      type: 'post', 
      author: 1 
     }, 
{ 
      id: 15955, 
      date: '2016-10-22T07:55:34', 
      title: { 
        rendered: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum', 
        protected: false 
       }, 
      content: { 
        rendered: '<p><img src="https://www.w3schools.com/css/paris.jpg" alt="w3c" />Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. <a href="htts://www.w3schools.com/css/paris">Link</a></P>', 
        protected: false 
        }, 
      link: 'htts://www.w3schools.com/css/paris', 
      type: 'post', 
      author: 1 
     } 
    ]; 

我想获得的HTML和文字分开“内容（呈现）”

content: { 
      rendered: '<p><img src="https://www.w3schools.com/css/paris.jpg" alt="w3c" />Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. <a href="htts://www.w3schools.com/css/paris">Link</a></P>', 
      protected: false 
     }, 

我的HTML代码应该是这样的：

<md-list class="home-feed-list"> 
    <div *ngFor="let item of homefeed"> 
    <md-list-item routerLink="/Story"> 
    <img md-list-avatar src="item.content.rendered(image url)" alt="" class="list-avatar"> 
    <h4>{{item.title.rendered}}</h4> 
<p>{{item.content.rendered(remaining text)}}</p> 
    </md-list-item> 
    <md-divider></md-divider> 
    </div> 
</md-list> 

请帮我把它正确的：我在angular2初学者和打字稿

Answer 1

您可以使用DOM API创建对象和检索来自渲染字符串的零碎。在接收到服务数据后，可以在视图模型中执行此操作，并在视图模型中相应地构建模型（即构造包含具有此图像和文本属性的对象的homefeed）。

一个简单的例子如下所示。

var contentRendered = '<p><img src="https://www.w3schools.com/css/paris.jpg" alt="w3c" />Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. <a href="htts://www.w3schools.com/css/paris">Link</a></P>' 
 

 
// create a DOM object from the rendered text 
 
var template = document.createElement("template"); 
 
template.innerHTML = contentRendered; 
 

 
// use DOM API to retrieve the data you need from the object 
 
var imgPart = template.content.firstChild.querySelector("img"); 
 
var text = template.content.firstChild.innerText; 
 

 
console.log(imgPart); 
 
console.log(text);

或者，你可以把这个逻辑的自定义过滤器AngularJS（一个或多个），并相应地调整渲染。虽然，我不是AngularJS用户，但从this link看来，这样的东西可以用于此目的。

希望这会有所帮助。