Question

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

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

export class AppComponent implements OnInit{

  formData = {
    first_name:"",
    last_name:"",
    middle_name:"",
    mobile_number:"",
    email_address:"",
    password:"",
    confirm_password:""
  };  

  constructor(private httpClient:HttpClient) {

  }

  ngOnInit() {
    console.log(this.httpClient.get("http://localhost:8000"));
    // how to use this returned Observable to get the actual response.
  }

  submittedDetails(){
      console.log('FirstName: ' + this.formData.first_name);
      console.log('LastName: ' + this.formData.last_name);
      console.log('MiddleName: ' + this.formData.middle_name);
      console.log('Email Address: ' + this.formData.email_address);
      console.log('MobileNumber: ' + this.formData.mobile_number);
      console.log('Password: ' + this.formData.password);
      console.log('Confirm Password: ' + this.formData.confirm_password);   
  }
}

我正在使用上面的代码来获取HTTP响应。现在，我正在学习Angular。在ngInit()上进行HTTP调用的原因纯粹是出于学习目的。
我正在使用 Angular 6 。

困难/问题：

我能够向我的后端代码发出请求，并且ngInit()中的代码向我返回了Observable。现在，如何使用它来查看收到的实际响应？

让我们假设响应的内容类型现在可以是任何东西。如果在这里（在Angular上下文中）了解任何错误，我深表歉意。

Answer 1

您必须订阅可观察的内容：

.overlay {
              position: fixed;
              top: 0;
              bottom: 0;
              left: 0;
              right: 0;
              background: rgba(0, 0, 0, 0.7);
              transition: opacity 500ms;
              visibility: hidden;
              opacity: 0;
            }
            .overlay:target {
              visibility: visible;
              opacity: 1;
            }
            .popup {
              margin: 70px auto;
              padding: 20px;
              background: #fff;
              border-radius: 5px;
              width: 30%;
              position: relative;
              transition: all 2s ease-in-out;
            }
            .popup .close {
              position: absolute;
              top: 20px;
              right: 30px;
              transition: all 200ms;
              font-size: 30px;
              font-weight: bold;
              text-decoration: none;
              color: #333;
            }
            .popup .content {
              max-height: 30%;
              overflow: auto;
            }
            .thumbnail img {
            width: 100%;
            height: 272px;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: 50% 20%;
            vertical-align: middle;
            position: inherit;
            }

请注意，默认情况下，this.httpClient.get("http://localhost:8000").subscribe(data => { console.log(data); });希望接收JSON并为您解析。如果您的回复返回其他内容，则应修改请求。

Answer 2

如果要在组件/服务中触发请求，则必须订阅它。

mysql -u root -p --database=db_name < dumpfile.sql

使用observable获取HTTP响应

2 个答案: