如何初始化变量值

Question

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

有一个小的要求。我们只能在名称旁边显示3个流派。如果音乐家可以演奏3种以上的流派，则应该在其他地方显示名称，也许会弹出以获取更多信息。对于一个特定的音乐家，我如何才能保留这种类型的数量，因此，如果类型超过3种，那么我只需要在弹出窗口中显示其他类型即可。

直到现在1.div ID音乐家，让音乐家x .......... 2. div {x，musicianName} 3.div类型 跨度如果x，类型金属 4.span ngIf x，genreClassical Classical 5.span ngIf x，genreIndie独立 6.span ngIf x，genreMetal＆x，genreClassical＆x，genreIndie＆x，genreRock ..（这是为了说明这位音乐家有更多流派

直到现在，我一直在进行硬编码。我想让它充满活力。我的方法是使用nginit并使用插值进行计数，因为这些流派的值分别为1和0。但这没有发生，因为可能有些地方我做错了。

请帮助。

Answer 1

根据您提供的信息，并假设将流派数组称为“流派”，则流派数将为“ 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，以显示少于三个或大于三个。