Question

我是Angular的新手，并且完全错过了这里的内容。我已经设置了一个组件，可以在文档之后发出get请求，并在上一篇文章中提供一些帮助:)现在我想知道如何将结果传递给模板？

这是我的组成部分：

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-emails',
  templateUrl: './emails.component.html',
  styleUrls: ['./emails.component.scss']
})

export class EmailsComponent implements OnInit {

test = 'test';
results: string[];

  constructor(private http: HttpClient) { }

  ngOnInit() {

    interface ItemsResponse {
      results: string[];
    }

    this.http.get<ItemsResponse>('assets/api/email_list.json').subscribe(data => {
      this.results = data['results'];
      console.log(this.results);
    });
  }

}

我的模板非常简单：

<p>results</p>
<p>{{test}}</p>
<p>
  {{results}}
</p>

似乎从学习角度到角度的过渡让我在这里碰到了我的头！

JSON格式：

[
    {
        "pk": "wGR",
        "created": "2017-10-07T01:42:25.110747Z",
        "email_domain": "domain.com",
        "sender_name": null,
        "sender_email": "jobsearch@domain.com",
        "has_user_viewed": false,
        "is_shielded": false
    }
]

Answer 1

试试这样：

export class EmailsComponent implements OnInit {

    test = 'test';
    results: Array<string> = [];

    constructor(private http: HttpClient) { }

    ngOnInit() {

        interface ItemsResponse {
            results: string[];
        }

        this.http.get<ItemsResponse>('assets/api/email_list.json').subscribe(data => {
            this.results = data.json();
            console.log(this.results);
        });
    }

}

Angular HttpClient如何将结果传递给模板

1 个答案: