ngFor 在现有应用程序中不工作，将在新创建的应用程序中工作答案

【问题标题】：ngFor not working in existing app, will work in newly created appngFor 在现有应用程序中不工作，将在新创建的应用程序中工作
【发布时间】：2020-02-26 21:26:13
【问题描述】：

我有一个现有的应用程序，其中包含很多硬编码值。意识到数据不会改变，我首先创建了一个在运行时加载的 JSON 文件。

在现有应用程序中，如果我尝试下面的代码，应用程序会变为空白，并且看起来并非所有模型都已构建/部署，但没有编译器问题。没有发现任何问题。我已经通过在 Firefox 的调试器工具中比较我的 testApp 和这个应用程序之间的编译对象来验证这一点。

我正在运行 macOS 10.14.6、Angular 7。不确定还需要什么。

这是我的代码的模板 sn-p。

        <ul *ngFor="let urlData of Urls">
            <li>
                <a href="{{ urlData.url }}" target="_blank"><span  class="citation">{{ urlData.label }}</span></a>
            </li>
         </ul>

以上编译没有问题，Visual Studio Code 显示没有问题。

如果我在代码中执行以下操作，

 <ul>
  <li>
    <a href="{{Urls[0].url}}" target="_blank">{{Urls[0].label}}</a>
  </li>
 <li>
  <a href="{{Urls[1].url}}" target="_blank">{{Urls[1].label}}</a>
 </li>
 <li>
  <a href="{{Urls[2].url}}" target="_blank">{{Urls[2].label}}</a>
  </li>
  <li>
  <a href="{{Urls[3].url}}" target="_blank">{{Urls[3].label}}</a>
  </li>
  <li>
  <a href="{{Urls[4].url}}" target="_blank">{{Urls[4].label}}</a>
  </li>
 </ul>

我可以访问我的对象中的数据，一切都很好。

创建了一个新的 testApp 并复制了数据文件、数据模型并更新了 app.component TS 和 HTML 模板文件，它可以正常工作。

我的应用程序正在使用 testApp 没有的材料。

我不知所措，在过去 24 小时内无法通过 Google 搜索解决问题或找到类似的内容。

重要提示：刚刚运行了一个测试并安装了@angular/material 和@angular/cdk，我在我的testApp 中遇到了同样的问题，所以它似乎与它们有关。删除两个包恢复了 testApp 中的功能。除了将它们添加到 testApp 并在 app.module.ts 文件中添加所需的导入语句之外，没有进行其他更改。

在使用 @angular/material 和 @angular/cdk 时，可能导致 *ngFor 构造失败的原因是什么？

【问题讨论】：

因为你已经复制了，你可以分享到Stackblitz吗？这样我们也可以调试它。

标签： angular typescript angular-material ngfor

【解决方案1】：

将 *ngFor="let urlData of Urls" 放入您的 li-TAGS。您的代码将为每个数组项生成一个新的 ul-TAG

【讨论】：

嗨，这并没有解决问题。请注意，我创建了一个 testApp，将文件复制到其中并在那里运行。 testApp 没有安装材料或 cdk，也没有 bootstrap。
对不起。评论只能编辑5分钟，我超出了时间长度。代码构建了 main 但在 polyfills 上死掉了。当我在代码中有 *ngFor 构造时，也没有任何其他构建。这完全奇怪。如前所述，没有引导程序、材料或 cdk 的 testApp 可与 ngFor 构造一起使用。但是添加这些项目并解决所有外部依赖项，以及 ngFor 构造会导致应用程序无法正确构建。
与一位从事 Angular 工作的同事交谈。他认为我缺少一个材料模块，所以我会去研究它。谢谢大家。

【解决方案2】：

没有查看浏览器的调试器控制台。发现 ngFor 未知，这意味着我缺少一些导入。只需要确定缺少哪些导入并添加它们。

【讨论】：