0

我是一个 Angular 2 新手，他的 Google-Fu 已经让他失望了三天。

这将很难解释，所以我会尽力而为。

我有一个看起来像这样的类：

import { Component } from '@angular/core';
import { Brush, BrushService } from '../services/brush.services';

@Component({
  selector: 'brush-body',
  templateUrl: './brushbody.html'
})
export default class BrushBodyComponent{

  brushes: Brush[] = [];

  constructor(private brushService: BrushService) {
    this.brushService.getBrushes().subscribe(
                  (data: any) => {
                  if (Array.isArray(data)){
                    this.brushes = <Brush[]>data;
                     }
                  },
                  (err: any) => console.log('Cannot get brushes.  Error code %s, URL: %s', err.status, err.url),
                  () => console.log('Brush(es) were retrieved. Here they are: ', this.brushes));

  }

}

TemplateURL 是这样的：

<div class="row">
  <div *ngFor="let brush of brushes">
    <brush-panel  [brush]="brush"></brush-panel>
  </div>
</div>

问题是brush没有得到任何值 - 它总是undefined.

我可以 100% 确定getBrushes()上面的调用正在运行，因为我可以在控制台中看到数据。

我正在尝试使用此类显示数据：

import { Component, Input } from '@angular/core';
import { Brush } from '../services/brush.services';


@Component({
  selector: 'brush-panel',
  templateUrl: './brushpanel.html'
})
export default class BrushMainComponent {
   @Input() brush: Brush;
}

这个HTML：

  <div>
        <div class="panel panel-info">
          <div class="panel-heading">
            <a [routerLink]="['/brushes', brush.id]"> {{brush.body}}:  {{ brush.title }} </a>
          </div>  
          <div class="panel-body">
            {{ brush.description }}
          </div>
          <div class="panel-footer">
              <brush-stars [rating]="brush.rating"></brush-stars>
          </div>
        </div>
  </div>

但是，我得到的只是空的引导面板。

我完全不知道为什么。

提前致谢。

添加：

这是服务：

@Injectable()
export class BrushService {

  constructor(private aHttpService: Http){}

  getBrushes(): Observable<Brush[]>{
      return this.aHttpService
      .get('http://localhost:15182/api/brush')
      .map(response => response.json());
      }

  getBrushById(brushId: number): Brush {
    let result: Brush = null;
    this.aHttpService.get('http://localhost:15182/api/brush/${brushId}').map(response => response.json())
    .subscribe((data: Brush) => {
                  result = data;
                  },
                  (err: any) => {
                                  console.log('Cannot get products.  Error code %s, URL: %s', err.status, err.url);
                                  result = null;
                                },
                  () => {
                          console.log('Brush(es) were retrieved');
                          result = null;
                        }
    )
    return result;
  }

  getCommentsForBrush(brushId: number): Comment[] {
      let c: Comment[] = [];
      this.aHttpService
      .get('http://localhost:15182/api/brush/${brushId}/comments')
      .map((response: any) => response.json())
      .map((comments: any) => comments.map((c: any) => new Comment(c.id, c.brushId, new Date(c.timestamp), c.user, c.rating, c.comment))
      .subscribe((data: any) => {
                  if (Array.isArray(data)){
                    c = data;
                    }
                  },
                  (err: any) => console.log('Cannot get comments.  Error code %s, URL: %s', err.status, err.url),
                  () => console.log('Comment(s) were retrieved')));

    return c;
  }
}

这是画笔的类：

export class Brush {
  constructor(
      public id: number,
      public title: string,
      public rating: number,
      public celebrity: string,
      public description: string) {
      }
  }

这是一条 JSON 记录：

{
Id: 0,
Title: "Met her at the grocery",
Rating: 1,
Celebrity: "Taylor Swift",
Description: "Saw Taylor Swift at the grocery store. Said hello. Took a picture. She was really nice."
},
4

2 回答 2

1

我怀疑Array.isArray()返回 false 因为data不是数组。

检查代码控制是否在if (Array.isArray(data)){ }块内。

于 2017-05-02T05:47:57.697 回答
0

答案很简单：JSON 的字段首字母大写。我的模板是小写的。一旦我将模板中的案例与 JSON 的案例相匹配，它就完全按预期工作了。

于 2017-05-03T00:58:28.030 回答