Question

这是我的第一篇文章，我想请求您提供帮助，我似乎无法找到任何相关信息。

我通过指南和ng-book创建＆＃34; SpotifyApp＆＃34;一直在学习Angular 2，我遇到了创建艺术家和专辑的打字稿类模型的最佳实践，将其导入我的组件并将HTTP请求的结果设置为该模型。

现在我没有看到常规阵列的任何差异，我不知道为什么会这样做，而且我似乎无法找到相关主题的相关信息。它有效，但我无法看到它的作用。我甚至试图打破它，如下面的示例给它随机属性，没有区别

我去了Angular官方文档，我没有看到任何差异，通过关于教程的Typescript教程指出并且没有提及它的任何内容。所以我的问题是为什么我需要模型，我使用它错了吗？我在申请中使用它是什么？

artist.model.ts

   import { Album } from './album.model'
export class Artist{
  id: number;
  name: number;
  peackock: string;
  genres: any;
  albums: Album[];
}

album.model.ts

export  class Album {
  id: number;
}

Spotify的-app.service

@Injectable()
export class SpotifyAppService {

  constructor(private http: Http) {
  }

  searchByTrack(query: string) {
    let params: string = [
      `q=${query}`,
      `type=artist`
    ].join("&");

    let queryUrl = `https://api.spotify.com/v1/search?${params}`;
    return this.http.get(queryUrl).map(res => res.json());
  }

}

Spotify的-app.component.ts

export class SpotifyAppComponent implements OnInit {
  searchStr: string;
  artist: Artist[];

  constructor(private spotifyService: SpotifyAppService) { }

  searchMusic(query: string):void{

     this.spotifyService.searchByTrack(query)
       .subscribe( res => {
       this.artist = res.artists.items;

       });
  };
  ngOnInit() {

  }

}

Answer 1

它只是一个对象。你已经注意到它可以有其他属性，但仍然有效，因为它是宽容的。一个明显的好处是代码完成和错误检测。在visual studio代码中打开代码，您可以控制Click到它的定义。

编辑：就像我说的那样，它可以让你完成代码。因此，当您开始输入n以继续并填写姓名时，您的想法就知道了。它为您提供了一个寻找您应该期望的属性的地方。你可以添加功能。给它更多的灵活性，只是从api传递的内容。

为什么以及如何使用Angular2 / Typescript模型？

1 个答案: