Question

在我输入'标题'的输入框中，我应该得到标题列表但是当我运行它时，我得到[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以及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。由于数据是一个对象数组，因此没有属性＆＃34; name＆＃34;在数据中。＆＃34;名称＆＃34;是该项目的财产。

模板应该是：

<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从数据库中获取特定数据

2 个答案: