Как добавить условие остановки в цикл ngFor - PullRequest
Новая
       20

Как добавить условие остановки в цикл ngFor

0 голосов
/ 24 мая 2019

Я создаю это веб-приложение, целью которого является создание ионных компонентов из объектов.

Я сталкиваюсь с этой проблемой:

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>

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?Conteudo1 Conteudo2 Conteudo3 Conteudo4 Conteudo5

Como sentiu как boas vindas do gabinete?Conteudo2 Conteudo3

Приветственный разговор?Conteudo3 Conteudo1

1 Ответ

0 голосов
/ 24 мая 2019

Если вы хотите, чтобы для каждого композита у вас был ионный элемент, и в зависимости от контента у вас есть ионная радиокнопка, вы должны использовать два * 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>

ц 

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

...