Question

我正在构建此Web应用程序，目标是从对象创建离子组分。

我正面临此问题：

我已经尝试使用ngIf，但是我认为问题在于我在数组内部创建了对象。

以下是一些关键代码：

-在模板内部-

 <ion-item
*ngFor="let comp of composals; let i = index;"
>
<ion-label>{{ composal.content[i] }}</ion-label>
  <ion-radio
    slot="start"
    name="asda"
    value="{{ comp.value }}"
    color="{{ comp.color }}"
  ></ion-radio>
</ion-item>

AppComponent

export class AppComponent {

title = 'Formulário';
mySplits: any;
public answersLength: number;

composals = [
  new Composal('#0000FF', 'checkbox', 'radio_1', 'Já realizou algum tratamento de Ortodentia anteriormente?', 'Conteudo1,Conteudo2,Conteudo3,Conteudo4,Conteudo5'),
  new Composal('#0000FF', 'checkbox', 'radio_2', 'Como sentiu as boas vindas do gabinete?', 'Conteudo2, Conteudo3'),
  new Composal('#0000FF', 'checkbox', 'radio_3', 'E a primeira conversa com o médico?', 'Conteudo3,Conteudo1'),
//    new Composal('primary', 'textbox', '', 'Insira o texto', ''),
];

目标是输出类似于：

前瞻性的阿尔及利亚紫菜吗？ Conteudo1 Conteudo2 Conteudo3 Conteudo4 Conteudo5

科莫·森蒂乌（Como sentiu）饰演蟒蛇维达斯（gaasinete）？ Conteudo2 Conteudo3

墨西哥的抗病毒药吗？ Conteudo3 Conteudo1

Answer 1

如果您希望每个合成物都有一个离子项目，并且根据内容有一个离子单选按钮，则应使用两个* ngFor，一个用于合成物，另一个用于每个内容

html：

<ion-card *ngFor="let comp of composals">
    <ion-label>{{ comp.label }}</ion-label>
    <ion-item *ngFor="let content of comp.content">
        <ion-label>{{content}}</ion-label>
        <ion-radio slot="start" value="biff" checked></ion-radio>
    </ion-item>
</ion-card>

ts：

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

interface Composal {
  color: string;
  label: string;
  content: string[];
}

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  title = 'Formulário';
  mySplits: any;
  public answersLength: number;
  composals: Composal[] = [
    { color: '#0000FF', label: 'Já realizou algum tratamento de Ortodentia anteriormente?', content: ['Conteudo1', 'Conteudo2', 'Conteudo3', 'Conteudo4', 'Conteudo5'] },
    { color: '#0000FF', label: 'Como sentiu as boas vindas do gabinete?', content: ['Conteudo2', 'Conteudo3'] },
    { color: '#0000FF', label: 'E a primeira conversa com o médico?', content: ['Conteudo3', 'Conteudo1'] },
  ];
  constructor(public navCtrl: NavController) {

  }

}

现在我只是在猜测您的班级样子，但这是个主意。如果需要，还需要将单选按钮分组到单选组中。

这是堆叠闪电战：

https://stackblitz.com/edit/ionic-g5ecg4

如何在ngFor周期中添加停止条件

1 个答案: