Question

我试图在角度2中实现一个客户端，该客户端使用Express中制作的书籍API。

我是下一个展示图书详情的组件：

@Component({
  selector: 'detail-books',
  styleUrls: ['./detail-books.component.css'],
  templateUrl: './detail-books.component.html',
})
export class DetailBooksComponent implements OnInit {
  book: Book;

  constructor(public booksService: BooksService, private route: ActivatedRoute) {
  }

  ngOnInit() {
    this.booksService.getBook().subscribe(book => {
        this.book = book;
    });
  }

}

模特书：

export class Book {
  _id: string;
  title: string;
  authors: string[];

  constructor(options: {
                _id: string;
                title: string; 
                authors: any;
              }) {
    this._id = options._id;
    this.title = options.title;
    this.authors = options.authors;
  }
}

使用Observables的服务：

@Injectable()
export class BooksService {


  constructor(private http: Http) {}



  getBook(): Observable<Book> {
    return this.http.get('http://localhost:3000/api/libros/58862f6c344ad2d207b8a4db')
      .map((res: Response) => <Book> res.json());
  }
}

问题在于，当我尝试使用{{book.title}}显示组件的书籍属性时，模板不会显示任何内容。然而，请求API工作。如果我将{{book}}放在模板中，它会显示Object object，如果我使用像{{book | json}}这样的json管道，模板会完美地显示数据。

我也尝试在服务中创建一个方法来从API获取所有书籍，虽然使用* ng我可以通过插值访问对象及其属性，使用扩展程序Augury of Chrome它显示数组组件的书籍（我添加了books: Book[]之类的属性）是Object的数组，而不是Book。

我认为这个问题可能出现在res.json到<Book>的类型中，但我已尝试过所有内容，而且属性的可视化也不起作用。

感谢。

可视化在角度2组件模板

0 个答案: