Question

我正在尝试为所有具有相同用例的应用编写通用代码。我想做的是在我的html文件中获取组件的引用，并在我的通用函数中使用它并执行* ngFor。离子型有可能吗？

Answer 1

这将与任何Angular项目完全相同，因为它是有角度的。

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

如何在离子应用程序中从ts运行ngfor循环？

1 个答案: