如何在Angular中创建问题模板

debugcn 发表于 Dev

Sarmad加油

我正在构建一个应用程序，它将向用户随机显示问题。我正在为此使用Angular Materials复选框和PrimeNg的列表框...

这些问题分为两个部分：Mat Radio用于判断真假，而Listbox用于选择题.....

        {
            "question": "Does the person like movies?",
            "id": "2-03",
            "level": 2,
            "type": "trueAndFalse",
            "options": ["Yes", "No"],
            "relatedTo": null
        },
    
        {
            "question": "What is your relation with the person?",
            "id": "2-04",
            "level": 2,
            "type": "multipleChoice",
            "options": ["Sibling", "Partner", "Child", "Parent", "Other"],
            "relatedTo": null
        }

这就是HTML查找这两种类型的方式...

<mat-radio-group color="primary" class="radio-group d-flex flex-column" name="gender" [(ngModel)]="demo-1" required>
    <mat-radio-button *ngFor="let opt of options" class="radio-button mont dg m-1" [value]="opt">{{opt}}</mat-radio-button>
</mat-radio-group>

<p-listbox [options]="possibleOptions" name="age" [(ngModel)]="demo-2" optionLabel="val" required></p-listbox>

选择的问题将是随机的。我需要一种方法来生成和显示两种类型的问题。...无论是服务，管道还是其他任何东西。

即使您能给我一个提示，也将不胜感激。无需编写整个代码。这些问题是动态的，因此无法对html进行硬编码。所有问题都将遵循相同的模式。

谢谢....

PS。我的想法是创建一个将问题的HTML生成为字符串的服务，然后在模板中显示它们。

阿斯基尔凯拉

您可以为此使用开关结构指令。

<ng-container [ngSwitch]="type">
  <mat-radio-group
    *ngSwitchCase="'trueAndFalse'"
    color="primary"
    class="radio-group d-flex flex-column"
    name="gender"
    [(ngModel)]="demo-1"
    required>
    <mat-radio-button
      *ngFor="let opt of options"
      class="radio-button mont dg m-1"
      [value]="opt">{{opt}}</mat-radio-button>
  </mat-radio-group>

  <p-listbox
    *ngSwitchCase="'multipleChoice'"
    [options]="possibleOptions"
    name="age"
    [(ngModel)]="demo-2"
    optionLabel="val"
    required></p-listbox>

  <div *ngSwitchDefault>Not a valid question</div>
</ng-container>

将其与您的问题类型的枚举配对即可获得扩展性（因为您可以通过添加案例来添加更多问题类型）

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。