如何在 ngFor 中实例化和使用后续数组？

Posted 2023-03-13

【中文标题】如何在 ngFor 中实例化和使用后续数组？

【英文标题】：How to instantiate and use subsequent array inside ngFor?

【发布时间】：2018-11-03 15:00:27

【问题描述】：

*ngFor="let arr = ['foo', 'bar', 'sla']; let item of arr; let i = index;"

为什么在let item of arr; 之前提供arr 的实例化会引发[object Object] 的异常，或者我为什么不能这样做？

我不想做let item of [...] 的原因是因为我还必须将此信息放入我不想做的.ts 文件中。

我希望能够返回并从我的 html 中引用这个数组，所以 我需要一种方法来引用声明的数组，而无需在数据文件中实例化它。

堆栈跟踪供参考：

ERROR 
Error: [object Object]
Stack trace:
resolvePromise@webpack-internal:///./node_modules/zone.js/dist/zone.js:795:31
resolvePromise@webpack-internal:///./node_modules/zone.js/dist/zone.js:766:17
scheduleResolveOrReject/<@webpack-internal:///./node_modules/zone.js/dist/zone.js:844:17
ZoneDelegate.prototype.invokeTask@webpack-internal:///./node_modules/zone.js/dist/zone.js:425:17
onInvokeTask@webpack-internal:///./node_modules/@angular/core/esm5/core.js:4956:24
ZoneDelegate.prototype.invokeTask@webpack-internal:///./node_modules/zone.js/dist/zone.js:424:17
Zone.prototype.runTask@webpack-internal:///./node_modules/zone.js/dist/zone.js:192:28
drainMicroTaskQueue@webpack-internal:///./node_modules/zone.js/dist/zone.js:602:25

【问题讨论】：

你可以试试这个*ngFor="let item of ['foo', 'bar', 'sla']; let i = index;"

@Sanoj_V 但这意味着我无法获得该数组的长度，因为它是匿名的。

你可以通过这样做得到数组的长度：*ngFor="let item of ['foo', 'bar', 'sla'] as arr; let i = index;" in your html arr.length

好的，可以发个答案吗？

是的，当然@li。 x

【参考方案1】：

您需要像往常一样实例化您的数组，但之后您需要添加as，这将允许您在 html 中对数组进行引用：

*ngFor="let item of ['foo', 'bar', 'sla'] as arr; let i = index;"

然后你就可以按预期说arr.length。