时间戳

首页 > 解决方案 > 如何初始化变量值

angular - 如何初始化变量值

问题描述

让我们假设一个场景。我们有一个音乐家列表（来自 JSON 格式的 API 服务调用），他们可以播放不同类型的音乐现在我应该在音乐家的名字旁边显示这些流派。

有一个小要求。我们只能在名称旁边显示 3 个流派。如果音乐家可以演奏 3 种以上的流派，则名称应显示在其他地方，可能会弹出更多信息。我怎样才能统计一个特定音乐家的流派数量，这样如果流派超过 3 个，那么我只需要在弹出窗口中显示其他流派。

到现在为止 1.div id 音乐家让 x 的音乐家 .......... 2. div {x,musicianName} 3.div Genres span ngIf x,genreMetal Metal 4.span ngIf x,genreClassical Classical 5. span ngIf x,genreIndie Indie 6.span ngIf x,genreMetal & x,genreClassical & x,genreIndie & x,genreRock ..(这是为了描绘这个音乐家有更多的流派

到目前为止，硬编码是我正在做的事情。我想让这个动态。我的方法是使用 nginit 并使用插值进行计数，因为这些类型的值分别为 1 和 0。但这并没有发生，因为我可能做错了什么。

请帮忙..

标签： angular

解决方案

使用您提供的信息，并假设流派数组称为“流派”，流派的数量将是“artist.genres.length”。

然后只显示前三个，您可能想要显示“artist.genres.slice(0,2)”，然后其余的将进入“artist.genres.slice(3,artist.genres.length - 1)”

最后根据条件“artist.genres.length > 3”做一件事或另一件事

--------------- 基于原始问题编辑进行编辑 --------------

如果您只是想弄清楚该 json 中是否存在三种或更多类型，如果您这样做会怎样：

countGenres(artist) {
   let c=0;
   for(let prop of artist) {
      if(prop.startsWith('genre')) c++;
   }
   return c;
}

基于每个流派的属性以“流派”一词开头的假设，这基本上会计算一个艺术家拥有的所有流派。

然后 ngIf 在该函数的跨度上显示少于三个或多于三个。

推荐阅读