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

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

目标是输出如下：

Já realizou algum tratamento de Ortodentia anteriormente？续写1 续集2 续集3 续篇4 Conteudo5

Como sentiu as boas vindas do gabinete？续集2 Conteudo3

与医生进行首次对话？续集3 Conteudo1

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) {

  }

}

现在我只是在猜测你的 class 长什么样，但这确实是个主意。如果需要，还需要将 radio-buttons 分组到 radio-group 中。

这里是 stackblitz：

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

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

How to add a stop condition to ngFor cycle

angular

ionic-framework

ngfor