如何在角度模板中打印对象值

Question

我正在尝试按{{object-name}}打印对象值，但我没有得到任何回应，因为它不打印，不确定我错过了什么;

类

export class RadioButtonQuestion extends QuestionBase<string> {
controlType = 'radio';
     options: {key: string, value: string}[] = [];  // I need to print this object for radio

constructor(options: {} = {}) {
  super(options);
  this.options = options['options'] || [];
}

元数据

let questions: QuestionBase<any>[] = [
  new RadioButtonQuestion ({
    key: 'eating-ice-cream',
    label: 'What ice-crea you like to eat?',
    order: 6,
    options: [
      {name:'ice-cream', key: 'Vanilla',  value: 'Vanilla'},
      {name:'ice-cream', key: 'banana',  value: 'banana'},
      {name:'ice-cream', key: 'apple',   value: 'apple'},
    ],
  })
 ];

在以下代码中，{{opt.value}}不会打印任何值，???

模板

<div *ngSwitchCase="'radio'">radio
   <small>radio</small> 
      <input *ngFor="let opt of question.options" type="radio" [name]="opt.name" [value]="opt.key">{{opt.value}}
</div>

Answer 1

你有一个错字。您目前有let opt of question.options，而且应该是let opt of questions.options

您的代码应为：

<input *ngFor="let opt of questions.options" type="radio" [name]="opt.name" [value]="opt.key">{{opt.value}}

此外，我不相信你想在实际的input

上使用* ngFor

尝试将输入包装在div中并使用* ngFor there：

<div *ngFor="let opt of options.questions" >
  <input type="radio" [value]="opt.key"/> {{opt.value}}
</div>

Answer 2

我上班了;还添加复选框

<div *ngSwitchCase="'radio'">radio
  <small>radio</small> 
    <div *ngFor="let opt of question.options" >
        <input type="radio" [name]="opt.name" [value]="opt.key"/> {{opt.value}}
    </div> 
</div>

 <div *ngSwitchCase="'checkbox'">
  <small>checkbox</small>
  <div *ngFor="let opt of question.options" >
        <input type="checkbox" [name]="opt.name" [value]="opt.key"/> {{opt.value}}
    </div>      
</div>