Javascript *导航到此.router.navigate（）页面后，ngFor出现故障；在ts文件中

我有一个电影主页，我想根据给ngFor的数组按特定顺序显示，但每当我使用ts文件中的routerlink导航到该组件时，它都会随机显示数据。我甚至尝试过使用bootstraps order-css，但它并没有按顺序显示

<div
*ngFor="let film of filmIterables; index as i"
[class]="'col-lg-3 col-md-4 col-sm-6 card-align order-' + i">

<div [class]="'card img-fade'">
  <a [routerLink]="['/home/films', film]">
    <img
      [src]="'../../assets/img/posters/' + film + '.jpg'"
      alt="film"
      [class]="'img-fluid'"
    />
  </a>
</div>

这有点疯狂，这是一个处理本地文件引用的随机错误，当我通过字符串引用本地文件名时，它会忽略顺序，但是如果我让数组引用精确图像的链接，它可能会工作

---

以下是该项目的stackblitz版本：

在我看来，您应该始终在*ngFor循环附带的任何.ts文件中对数据进行javascript排序。（在你的情况下是电影迷）。永远不要假设数据已经排序

---

并且不要使用

order-'+i

如果您希望根据给定的数组遵循顺序，请替换 中的“索引为i”

默认情况下，比较器将使用Unicode点值，因此看起来很奇怪

如果您喜欢上面的数组，您可以根据给定的数组获得特定的订单。

---

谢谢你的研究性问题。

你能在stackblitz.com上重现这个问题吗？stackblitz确实不错。但是，你是如何培养电影人才的？这需要订购..嘿，谢谢你们的反馈伙计们，我发现了一些有趣的东西。我必须从本地图像转到通过typescript文件中的数组拉入的每个图像的链接。我最初把文件夹名作为字符串放在那里，所以我也可以把它作为导航中的链接，如果你点击导航栏中的“电影”，你就会明白我的意思。现在，当我从“用户”转到“登录”并返回到“登录”时，不会出现错误。这有点疯狂，我会尝试把它添加到我的本地项目中。我在Stackblitz中复制了它，但在Stackblitz中它不会失去秩序。我很欣赏这个清晰的答案和直截了当的方法，但这并没有解决我在本地项目中遇到的问题，但在stackblitz中，它和其他答案一起解决了问题。我真的不明白为什么routerlink会重新安排已经初始化的组件的NGF，但确实是这样，我仍然没有一个解决方案。我已经完成了这个项目的所有其他工作，如果你想自己复制它并找到修复它的方法，我会给你一个拥抱。这里有一个链接：所有的东西都已经放在一起了，很整洁，也很别致！我已经为我的投资组合建立了这个，我很想学习一些像这样重要的东西的修复方法。只需查看登录页即可。ts的顺序正确，链接与图像的对应关系良好，在初始渲染时，所有这些都将根据ts文件的顺序放置在屏幕上。当我从用户routerlink转到登录时，我会返回，所有这些都是无序的。他们链接在一起很好，我没有解决这个问题，我只是试着在他们的网站中设置顺序，看看css是否能解决它，但当我重新下载时它没有，并且不会随随机数量的传入数据进行缩放。我想我不明白问题是什么。你为什么不干脆把它们作为你的ngOnInit方法的一部分？这样，每次您访问路线时，它们都会正确排序？

export const FilmUrls: any[] = ['Spirited Away','My Neighbor Totoro','Laputa Castle in the Sky','Princess Mononoke','Nausicaa of the Valley of the Wind','Arrietty','Grave of the Fireflies',"Howl's Moving Castle","Kiki's Delivery Service",'My Neighbors the Yamadas','Ocean Waves','Only Yesterday','Pom Poko','Ponyo','Porco Rosso','Tales From Earthsea','From Up On Poppy Hill','The Cat Returns','The Tale of Princess Kaguya','The Wind Rises','When Marnie Was There','Whisper of the Heart',];

export const FilmLinks: any[] = ['https://www.studioghibli.com.au/wp-content/uploads/2017/07/1055-title-treatment-portrait-key-art-normal-medium-683x1024.jpg','https://www.studioghibli.com.au/wp-content/uploads/2017/06/poster_mononoke-683x1024.jpg','https://www.studioghibli.com.au/wp-content/uploads/2017/07/poster_my_neighbor_totoro-683x1024.jpg','https://www.studioghibli.com.au/wp-content/uploads/2017/07/1100-title-treatment-portrait-key-art-normal-medium-683x1024.jpg','https://www.studioghibli.com.au/wp-content/uploads/2017/07/14815-title-treatment-portrait-key-art-normal-medium-683x1024.jpg','https://www.studioghibli.com.au/wp-content/uploads/2017/07/2783-title-treatment-portrait-key-art-normal-medium-683x1024.jpg','https://www.studioghibli.com.au/wp-content/uploads/2017/07/1476-title-treatment-portrait-key-art-normal-medium-683x1024.jpg','https://www.studioghibli.com.au/wp-content/uploads/2017/07/poster_porco_rosso-683x1024.jpg','https://www.studioghibli.com.au/wp-content/uploads/2017/07/1475-title-treatment-portrait-key-art-normal-medium-683x1024.jpg','https://www.studioghibli.com.au/wp-content/uploads/2017/07/18651-title-treatment-portrait-key-art-normal-medium-683x1024.jpg','https://www.studioghibli.com.au/wp-content/uploads/2017/07/18474-title-treatment-portrait-key-art-normal-medium-683x1024.jpg','https://www.studioghibli.com.au/wp-content/uploads/2017/07/1484-title-treatment-portrait-key-art-normal-medium-683x1024.jpg','https://www.studioghibli.com.au/wp-content/uploads/2017/07/poster_kiki-683x1024.jpg','https://www.studioghibli.com.au/wp-content/uploads/2017/07/1483-title-treatment-portrait-key-art-normal-medium-683x1024.jpg','https://www.studioghibli.com.au/wp-content/uploads/2017/07/22719-title-treatment-portrait-key-art-normal-medium-683x1024.jpg','https://www.studioghibli.com.au/wp-content/uploads/2017/07/poster_wind_rises-683x1024.jpg','https://www.studioghibli.com.au/wp-content/uploads/2017/07/poster_cat_returns-683x1024.jpg','https://www.studioghibli.com.au/wp-content/uploads/2017/07/15673-title-treatment-portrait-key-art-normal-medium-683x1024.jpg','https://www.studioghibli.com.au/wp-content/uploads/2017/07/5845-title-treatment-portrait-key-art-normal-medium-683x1024.jpg','https://www.studioghibli.com.au/wp-content/uploads/2017/07/1482-title-treatment-portrait-key-art-normal-medium-683x1024.jpg','https://www.studioghibli.com.au/wp-content/uploads/2017/07/1479-title-treatment-portrait-key-art-normal-medium-683x1024.jpg','https://www.studioghibli.com.au/wp-content/uploads/2017/07/16933-title-treatment-portrait-key-art-normal-medium-683x1024.jpg','https://www.studioghibli.com.au/wp-content/uploads/2017/07/arrietty_poster-683x1024.jpg','https://www.studioghibli.com.au/wp-content/uploads/2017/07/Isao-Takahata-and-His-Tale-of-the-Princess-Kaguya-683x1024.jpg',];