无法使用 Angular js 2 打印数据

Posted 2023-02-23

【中文标题】无法使用 Angular js 2 打印数据

【英文标题】：Not able to print data using Angular js 2

【发布时间】：2018-10-02 01:39:59

【问题描述】：

我不确定我哪里出错了，我在服务器端和客户端都创建了一个Mean Stack应用。服务器端工作正常我能够从表中发布、获取和删除数据，但无法在 component.html 文件中显示获取数据。我已经分享了我的组件、服务和 html 文件，请找出错误所在。如果您需要任何其他文件，我可以分享。

This is ideas.component.ts

import  Component, OnInit  from '@angular/core';
import  IdeaService  from "../idea.service";
import  Idea  from "../idea";

@Component(
  selector: 'app-ideas',
  templateUrl:'./ideas.component.html',
  styleUrls: ['./ideas.component.css'],
  providers: [IdeaService]
)
export class IdeasComponent implements OnInit 
  Ideas: Idea[];
  idea: Idea;
  Name: String;
  ideas: String;
  Comments: String

  constructor(private ideaService: IdeaService)  

  ngOnInit() 
    this.ideaService.getIdeas().subscribe(idea => this.idea = idea);
  

This ideas.component.html

<div class="container">
    <div *ngFor="let idea of idea">
        <div class="col-md-3">
            idea.Name
        </div>
        <div class="col-md-3">
            idea.ideas
        </div>
        <div class="col-md-3">
            idea.Comments
        </div>
        <div class="col-md-3">
            <input type="button" (click)="deleteContact(contact._id)" value="Delete" class="btn btn-danger">
            <br>
            <br>
        </div>
    </div>
</div>

This is idea.service.ts

import  Injectable  from '@angular/core';
import  Http, Headers  from '@angular/http';
import  Idea  from './idea';
import 'rxjs/add/operator/map';

@Injectable()
export class IdeaService 

  constructor(private http: Http)  

  getIdeas() 
    return this.http.get('http://localhost:3000/Demo_App/Home')
      .map(res => res.json());
  

  addIdeas(newIdea) 
    var headers = new Headers();
    headers.append('Content-Type', 'application/json')
    return this.http.post('http://localhost:3000/Demo_App/ideas', newIdea,  headers: headers )
      .map(res => res.json());
  

   deleteIdea(id)
    return this.http.delete('http://localhost:3000/Demo_App/idea/'+id)
    .map(res => res.json());
   

This is idea.ts

export class Idea
    id?;
    Name:String;
    ideas:String;
    Comments:String;

【参考方案1】：

您应该在循环中使用“idea”而不是“ideas” 您的问题是在订阅中您正在覆盖您的想法对象。您没有将任何内容推入数组。

你需要做的改变：

ideas.component.ts

ideasArray: Idea[] = [];

ngOnInit() 
    this.ideaService.getIdeas().subscribe(idea => 
                                          this.idea = idea;
                                            if(idea) 
                                             this.ideasArray.push(idea););

ideas.component.html

<div class="container">
      <div *ngFor="let idea of ideasArray">
        <div class="col-md-3">
          idea.Name
        </div>
        <div class="col-md-3">
          idea.ideas
        </div>
        <div class="col-md-3">
          idea.Comments
        </div>
      </div>
    </div>

【讨论】：

添加了idea类

我会假设，将“想法”更改为“想法”没有帮助？

【参考方案2】：

你必须在你的html中使用idea而不是ngFor中的idea来显示价值

<div class="container">
  <div *ngFor="let idea of ideas">
    <div class="col-md-3">
      idea.Name
    </div>
    <div class="col-md-3">
      idea.ideas
    </div>
    <div class="col-md-3">
      idea.Comments
    </div>
  </div>
</div>

您可以从下面的链接获得更多关于以角度显示数据的信息 https://angular.io/guide/displaying-data

【讨论】：

我做了一些改动。但即使现在我也面临同样的问题

在你的 ngFor 中这样写，让想法的想法