ngFor无法在现有应用中使用，将在新创建的应用中使用

Question

我有一个具有很多硬编码值的现有应用程序。实现数据不会改变，我首先创建了一个要在运行时加载的JSON文件。

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

我正在运行macOS 10.14.6，Angular7。不知道还需要什么。

这是我的代码的模板片段。

        <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构造失败的原因是什么？

Answer 1

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

Answer 2

没有在浏览器的调试器控制台中查看。发现ngFor是未知的，这意味着我缺少一些导入。只需确定缺少的进口并将其添加即可。