Angularのフロントページにてエラー発生。

Question

AngularとNode.jsにより簡易的なテストページを作成しました。

<概要>
商品情報があり、クリックすると
商品詳細ページに遷移する。

各データをMongoDBから取得して
商品情報を表示しているんですが、
２点解消したい点がございます。

①トップページで下記エラーが表示されてしまいます。(console.logより)

ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
    at NgForOf.ngDoCheck (common.js:3193)
    at callHook (core.js:3042)
    at callHooks (core.js:3008)
    at executeInitAndCheckHooks (core.js:2960)
    at refreshView (core.js:7178)
    at refreshComponent (core.js:8319)
    at refreshChildComponents (core.js:6956)
    at refreshView (core.js:7213)
    at refreshEmbeddedViews (core.js:8273)
    at refreshView (core.js:7187)

②各商品詳細ページへ移動するときに画像の表示がおくれて見えます。
一瞬遅れて(sourceコードが表示されてから)画像が表示されているように見えます。

調査してますが、原因解消方法など現状わかっておりません。
原因、対処方法を教えていただけますでしょうか。

githubページになります。

https://github.com/kurubusi1/my-first-app

※以下URLにてページ公開しております。

https://my-first-app-kurubusi1.herokuapp.com/products

以上、よろしくお願いいたします。

Answer 1

とりあえず①について確認してみました。

以下のエラーは型の問題になります。

ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

*ngForは繰り返し処理になりますので、配列を対象としなければなりません。

コードを拝見したところ、product-listings.component.tsの14行目がanyになっていました。
ローカルで確認しただけですが、以下のように修正するとひとまずエラーは解消できると思います。

products: any[] // <-- []として配列にする