從api獲取數據時出現Angular 2錯誤

Question

我正在創建一個Web API並使用Angular 2從服務器到客戶端獲取數據。 但是發生以下錯誤。 （請參閱錯誤鏈接）

---

鏈接中的錯誤圖像

Link中的錯誤Image2

圖表類

class ChartComponent {
models: Array<Model> = [];

constructor(public http: Http) {
    this.getData();
}

getData() {
    this.http.get('http://localhost:48512/api/data')
        .map(res => (<Response>res).json())
        .map((models: Array<any>) => {
            let result: Array<Model> = [];
            if (models) {
                models.forEach(model => {
                    result.push(
                        new Model(
                            model.imageUrl,
                            model.question,
                            model.answer
                            ));
                });
            }

            return result;
        }).
        subscribe(
        data => {
            this.models = data;
            console.log(this.models);
        },
        err => console.log(err)
        );
}}

模型類

class Model {
constructor(
    public imageUrl: string,
    public question: string,
    public answers: string) {
}}

調節器

[Route("api/[controller]")]
public class DataController : Controller
{
    public IEnumerable<Description> Get() {
        return new List<Description> {

            new Description {
                ImageUrl="",
                Question="What is SignalR?",
                Answers="ASP.NET SignalR is a library for ASP.NET developers that simplifies the process of adding real-time web functionality to applications. Real-time web functionality is the ability to have server code push content to connected clients instantly as it becomes available, rather than having the server wait for a client to request new data. SignalR can be used to add any sort of 'real-time' web functionality to your ASP.NET application. While chat is often used as an example, you can do a whole lot more. Any time a user refreshes a web page to see new data, or the page implements long polling to retrieve new data, it is a candidate for using SignalR. Examples include dashboards and monitoring applications, collaborative applications (such as simultaneous editing of documents), job progress updates, and real-time forms. SignalR also enables completely new types of web applications that require high frequency updates from the server, for example, real-time gaming. For a great example of this, see the ShootR game. SignalR provides a simple API for creating server-to-client remote procedure calls (RPC) that call JavaScript functions in client browsers (and other client platforms) from server-side .NET code. SignalR also includes API for connection management (for instance, connect and disconnect events), and grouping connections."
            },

            new Description {
                ImageUrl="",
                Question="What is Web API?",
                Answers="In recent years, it has become clear that HTTP is not just for serving up HTML pages. It is also a powerful platform for building Web APIs, using a handful of verbs (GET, POST, and so forth) plus a few simple concepts such as URIs and headers. ASP.NET Web API is a set of components that simplify HTTP programming. Because it is built on top of the ASP.NET MVC runtime, Web API automatically handles the low-level transport details of HTTP. At the same time, Web API naturally exposes the HTTP programming model. In fact, one goal of Web API is to not abstract away the reality of HTTP. As a result, Web API is both flexible and easy to extend. In this hands-on lab, you will use Web API to build a simple REST API for a contact manager application. You will also build a client to consume the API. The REST architectural style has proven to be an effective way to leverage HTTP - although it is certainly not the only valid approach to HTTP. The contact manager will expose the RESTful for listing, adding and removing contacts, among others. This lab requires a basic understanding of HTTP, REST, and assumes you have a basic working knowledge of HTML, JavaScript, and jQuery."
            },


            new Description {
                ImageUrl="",
                Question="What is Angular 2?",
                Answers="Angular 2 is an open-source web application framework mainly maintained by Google and by a community of individuals and corporations to address many of the challenges encountered in developing single-page applications. It aims to simplify both the development and the testing of such applications by providing a framework for client-side model–view–controller (MVC) and model–view–viewmodel (MVVM) architectures, along with components commonly used in rich Internet applications. The Angular 2 framework works by first reading the HTML page, which has embedded into it additional custom tag attributes. Angular interprets those attributes as directives to bind input or output parts of the page to a model that is represented by standard JavaScript variables. The values of those JavaScript variables can be manually set within the code, or retrieved from static or dynamic JSON resources. According to JavaScript analytics service Libscore, Angular 2 is used on the websites of Wolfram Alpha, NBC, Walgreens, Intel, Sprint, ABC News, and approximately 8,400 other sites out of 1 million tested in July 2015.[2] Angular 2 is the frontend part of the MEAN stack, consisting of MongoDB database, Express.js web application server framework, Angular.js itself, and Node.js runtime environment."
            }

        };

     }
}

}

Answer 1

您需要以這種方式導入map運算符：

import 'rxjs/Rx';

要么

import 'rxjs/add/operator/map';

有關詳細信息，請參閱此問題：

• Angular 2 HTTP GET與TypeScript錯誤http.get（...）。map不是[null]中的函數