這是 JSON 檔案。我已經創建了一個 .text 組件，它有一個文本欄位和一個帶有單選按鈕的 .radio 組件。現在如何根據 .json 有條件地顯示它們
這是 .json 檔案：
export const questions =
[
{
"question": "What is you name",
"type": "text"
},
{
"question": "Are you happy",
"type": "radio"
},
{
"question": "How are you",
"type": "text"
}
]
這是 .ts 檔案：
import { Component, OnInit } from '@angular/core';
import {questions} from './questions';
import { RadioComponent } from './radio/radio.component';
import { TextComponent } from './text/text.component';
interface q
{
question: String;
type: String;
}
@Component({
selector: 'app-disposition-wizard',
templateUrl: './disposition-wizard.component.html',
styleUrls: ['./disposition-wizard.component.scss']
})
export class DispositionWizardComponent implements OnInit {
constructor() { }
ques: q[] = questions;
ngOnInit() {
}
}
這是 HTML 檔案，目前它同時顯示文本和無線電組件
<p *ngFor = "let q of ques">{{q.question}}
<app-text></app-text>
<app-radio></app-radio>
</p>
uj5u.com熱心網友回復：
您需要使用*ngFor模板中的 an 回圈遍歷您的 ques 陣列。見ngFor Angular
app-text編輯：編輯后 - >所以如果我理解得很好，如果問題型別是text并且app-radio組件是問題型別，你想顯示組件radio？
您可以使用以下*ngIf條件：
<div *ngIf="q.type === 'radio'"><app-radio></app-radio></div>
<div *ngIf="q.type === 'text'"><app-text></app-text></div>
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/437358.html
下一篇：Sorbet覆寫來自內核的URI