如何使用 Angular Observer 从数据库中获取特定数据

Question

在输入框中，当我输入 'Title' 时，我应该得到标题列表，但是当我运行时，我得到 [object Object][object Object][object Object] 的列表...

这是API https://jsonplaceholder.typicode.com/posts

我需要获取特定信息

HTML

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">

      <input type="text" #name>
      <button class="btn btn-primary" (click)="onGet(name.value)">Add Server</button>
       <p>{‌{ servers }}</p>

    </div>
  </div>
</div>

COMPONENT.TS

    import { Component } from '@angular/core';

import {ServerService} from "./server.service";

@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.css'],
  providers: [ServerService]
})
export class ListComponent  {
  servers = [];
  constructor(private serverService: ServerService) {}

  onGet(name: string) {
    this.serverService.getServers( name )
      .subscribe(
        (servers: any[]) => this.servers = servers,
        (error) => console.log(error)
      );
  }
}

SERVICE.TS



import { Injectable } from '@angular/core';
import {  Http, Response } from '@angular/http';
import 'rxjs/add/operator/map';
import { Observable } from 'rxjs/Observable';
import {map} from "rxjs/operator/map";

@Injectable()
export class ServerService {
  constructor(private _http: Http) {}


  getServers(name: string) {
    console.log(name);
    return this._http.get('https://jsonplaceholder.typicode.com/posts' )
      .map(
        (response: Response) => {
          const data = response.json();
          console.log(data)
          return data.name;
        }
      )
  }
}

请帮我解决这个问题。

Answer 1

您尝试在模板中插入的值是一个数组 (servers)。当您尝试在 Angular 模板中插入引用类型对象时，您将获得它们的字符串表示形式（插入使用 toString()），因此，[object Object] 或 [object Array]。如果您想在模板中以纯文本形式查看对象，请考虑使用 json 管道，如下所示：<p>{‌{ servers | json }}</p>，但很可能您会想要使用 ngFor 并展开对象在数组内部，像这样，可能是：<p *ngFor="let server of servers">{{ server.title}}</p>，例如。详细了解 json 管道和 ngFor here and here

Answer 2

更新您的服务如下：

import { Injectable } from '@angular/core';
import {  Http, Response } from '@angular/http';
import 'rxjs/add/operator/map';
import { Observable } from 'rxjs/Observable';
import {map} from "rxjs/operator/map";

@Injectable()
export class ServerService {
  constructor(private _http: Http) {}


  getServers(name: string) {
    console.log(name);
    return this._http.get('https://jsonplaceholder.typicode.com/posts' )
      .map(
        (response: Response) => {
          const data = response.json();
          console.log(data)
          return data;
        }
      )
  }
}

此处返回数据而不是 data.name。由于数据是 object 的数组，因此数据中没有属性 "name"。 "name" 是其项目的属性。

模板应该是：

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">
      <input type="text" #name>
      <button class="btn btn-primary" (click)="onGet(name.value)">Add Server</button>
       <div *ngFor="let server of servers">
         <p *ngIf="name.value == 'title'">{{server.title}}</p>
         <p *ngIf="name.value == 'id'">{{server.id}}</p>
         <p *ngIf="name.value == 'userId'">{{server.userId}}</p>
         <p *ngIf="name.value == 'body'">{{server.body}}</p>
       </div>
     </div>
   </div>
</div>

然后会显示标题列表。

如何使用 Angular Observer 从数据库中获取特定数据

How to fetch a particular data from database using Angular Observer

html

observers

angular