如何向 ngFor 循环添加停止条件

Question

我正在构建这个网络应用程序，目标是从对象创建离子组件。

我面临这个问题：

https://imgur.com/mGnZw1t

我已经尝试过使用 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>

应用组件

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', ''),
];

目标是输出如下：

Já realizou algum tratamento de Ortodentia anteriormente？ 孔图多1 孔图2 孔图3 孔图4 继续5

Como sentiu as boas vindas do gabinete？ 孔图2 继续3

E a primeira conversa com o medico？ 孔图3 孔图1

Answer 1

如果你希望每个作曲都有一个 ion-item 并且根据内容你有一个 ion-radio-button 你应该使用两个 *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