Как я могу запустить цикл NGFOR из TS в ионном приложении?

Question

Я пытаюсь написать общий код для всех моих приложений, которые имеют одинаковый вариант использования.то, что я хочу сделать, это получить ссылку на компонент в моем HTML-файле и использовать его в моих общих функциях и сделать * ngFor.Возможно ли в ионном режиме?

Answer 1

Это будет работать точно так же, как и любой угловой проект, потому что он угловой.

в .ts просто инициализировать ваш массив.Также может быть инициализирован из API.Просто убедитесь, что вы знаете свои ключи для использования в цикле.

Пример.

private countries: Country[] = [{
        id: 0,
        name: 'Japan',
        ports: [
          { id: 0, name: 'Tokai' }
        ]
      }, {
        id: 2,
        name: 'Russia',
        ports: [
          { id: 2, name: 'Vladivostok' }
        ]
      }, {
        id: 3,
        name: 'India',
        ports: [
          { id: 3, name: 'Navlakhi' }
        ]
      }, {
        id: 4,
        name: 'Cayman Islands',
        ports: [
          { id: 4, name: 'Cayman Brac' }
        ]
      }, {
        id: 6,
        name: 'Egypt',
        ports: [
          { id: 6, name: 'Port Ibrahim' }
        ]
      }, {
        id: 7,
        name: 'Finland',
        ports: [
          { id: 7, name: 'Brahestad' },
          { id: 37, name: 'Kantvik' }
        ]
      }, {
        id: 8,
        name: 'Germany',
        ports: [
          { id: 8, name: 'Brake' }
        ]
      }
   }];

В вашем html вы можете просто назвать это так:

<ion-content>
          <ion-grid *ngFor="let country of countries">
                <ion-row>
                  <ion-col><b>ID:</b> {{country.ID}}</ion-col>
                </ion-row>
                <ion-row>
                  <ion-col><b>Name:</b> {{country.Name}}</ion-col>
                </ion-row>
          </ion-grid>
 </ion-content>