ngДля не работает в существующем приложении, будет работать во вновь созданном приложении - PullRequest
Новая
       44

ngДля не работает в существующем приложении, будет работать во вновь созданном приложении

1 голос
/ 31 октября 2019

У меня есть приложение с большим количеством жестко закодированных значений. Понимая, что данные не меняются, я начал с создания файла JSON для загрузки во время выполнения.

В существующем приложении, если я попробую приведенный ниже код, приложение станет пустым, и похоже, что не все модели построены / развернуты, НО нет проблем с компилятором. Никаких проблем не отмечено. Я проверил это, сравнив скомпилированные объекты между моим testApp и этим приложением в инструментах отладчика в Firefox.

Я использую macOS 10.14.6, Angular 7. Не уверен, что еще понадобится.

Вот фрагмент шаблона для моего кода. 

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

Вышеуказанные компиляции без проблем, и код Visual Studio не показывает проблем.

enter image description here

Если вместо этого я сделаю следующеев коде 

 <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.

Я в растерянности и не смог решить проблему или найти что-либо подобное по поиску в Google за последние 24 часа.

ВАЖНО : Просто запустил тест и установил @ angular / material и @ angular / cdk, и у меня возникла та же проблема в моем testApp, поэтому она, похоже, связана с ними. Удаление обоих пакетов восстановило функциональность в testApp. Никаких других изменений не было сделано, кроме как добавить их в testApp и добавить операторы импорта, необходимые в файле app.module.ts.

Что может вызывать сбой конструкции * ngFor при использовании @angular/ материал и @ angular / cdk?

Ответы [ 2 ]

3 голосов
/ 31 октября 2019

Поместите * ngFor = "let urlData of Urls" в свои li-TAGS. Ваш код будет производить новый ul-TAG для каждого элемента массива

0 голосов
/ 02 ноября 2019

Не смотрел в консоли отладчика браузера. Обнаружено, что ngFor не был известен, то есть я пропускаю некоторые операции импорта. Просто нужно определить, чего нет в импорте и добавить их.

...