首页 文章

离子3 - 动态添加离子段

提问于
浏览 次
0

我正面临着动态添加离子段值的问题 . 以下是我的工作......

TS档案：

this.rioTypes = ['ABC', 'XYZ', 'PQR'];
  items1: any = [1, 2, 3, 4];
segmentVal: string = "ABC";

HTML：

<ion-segment [(ngModel)]="segmentVal" color="primary">
  <ion-segment-button *ngFor="let rioType of rioTypes; let i = index;" value="{{rioType}}">
    {{rioType.title}}
  </ion-segment-button>
</ion-segment>

<div [ngSwitch]="segmentVal" *ngFor="let r of rioTypes">

<ion-list *ngSwitchCase="r" ngSelected="selected">

   <ion-item  *ngFor="let item of items1">
    <h2>TAB - {{item}}</h2>
  </ion-item>
</ion-list>

似乎一切看起来都很好但是当我在设备中运行时... ony段显示不低于内容..我使用Ionic v3.19.0请任何人帮助我解决它 .

以下代码的跟随错误

<div [ngSwitch]="segmentVal">

<ion-list *ngFor="let r of rioTypes" *ngSwitchCase="r" 
ngSelected="selected">

 <ion-item  *ngFor="let item of items1">
<h2>TAB - {{item}}</h2>
</ion-item>
</ion-list>

`未捕获错误：模板解析错误：一个元素上不能有多个模板绑定 . 仅使用一个名为“template”的属性或以*（“为前缀的前缀

<ion-list *ngSwitchCase="r" [ERROR ->]*ngFor="let r of rioTypes" ngSelected="selected">

       <ion-item  *ngFor="let item of "): ng:///AppModule/UserdashboardPage.html@29:36
at syntaxError (vendor.js:80395)
at TemplateParser.parse (vendor.js:104243)
at JitCompiler._parseTemplate (vendor.js:113630)
at JitCompiler._compileTemplate (vendor.js:113605)
at vendor.js:113507
at Set.forEach (<anonymous>)
at JitCompiler._compileComponents (vendor.js:113507)
at vendor.js:113377
at Object.then (vendor.js:80384)
at JitCompiler._compileModuleAndComponents (vendor.js:113376)`
angular typescript ionic3

1 回答

  • 1

    问题是你最终用for循环创建了多个 ngSwitch 块 . 所有案例只需要一个区块 .

    在开关内使用循环列表 . 您可以使用 ng-container 或普通div作为循环，因为您在一个标记中不能有2个指令 .

    <div [ngSwitch]="segmentVal">
<ng-container *ngFor="let r of rioTypes" >
<ion-list *ngSwitchCase="r">

   <ion-item  *ngFor="let item of items1">
    <h2>TAB - {{item}}</h2>
  </ion-item>
</ion-list>
</ng-container>
</div>
    回复于

相关问题