Question

我是一名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;
  }
}

这是Brush的类：

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."
},

Answer 1

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

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

Answer 2

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

为什么我的数据绑定绑定在Angular 2中？

2 个答案: