我有以下代碼：
@Component({
selector: 'app-accountdetailed',
templateUrl: './accountdetailed.page.html',
styleUrls: ['./accountdetailed.page.scss'],
})
export class AccountdetailedPage implements OnInit {
protected itemId = '';
public item = {
email: '[email protected]',
joinDate: '22-11-2022',
firstName: 'Angular',
lastName: 'Patel'
};
constructor(
protected route: ActivatedRoute,
protected userParamService: UserParametersService,
protected authService: AuthenticationService
) {
}
ngOnInit() {
this.itemId = this.route.snapshot.params.id;
switch (this.itemId) {
case 'yourDetails':
this.yourDetailsHtml();
}
}
protected yourDetailsHtml() {
document.getElementById('detailedContent').innerHTML = ' <ion-item color="dark">\n'
' <ion-label position="stacked">Member Since</ion-label>\n'
' <ion-input id="memberSince" readonly type="text"></ion-input>\n'
' </ion-item>\n'
' <ion-item color="dark">\n'
' <ion-label position="stacked">Email Address</ion-label>\n'
' <ion-input id="emailAddress" readonly type="text">{{item.email}}</ion-input>\n'
' </ion-item>\n'
' <ion-item color="dark">\n'
' <ion-label position="stacked">First Name</ion-label>\n'
' <ion-input id="firstName" autocapitalize="words" type="text"></ion-input>\n'
' </ion-item>\n'
' <ion-item color="dark">\n'
' <ion-label position="stacked">Last Name</ion-label>\n'
' <ion-input id="lastName" autocapitalize="words" type="text"></ion-input>\n'
' </ion-item>\n'
' <section>\n'
' <ion-button onclick="memberDetails(\'update\');presentAlert(\'Saved\', \'\');" expand="block">Save</ion-button>\n'
' </section>';
}
}
如基于路徑所見，將加載 HTML。我想知道如何將專案物件呈現給輸入以便設定值。例如
<ion-input>{{ item.email }}</ion-input>
目前，如果我這樣做{{ item.email }}是行不通的。
謝謝
uj5u.com熱心網友回復：
您應該將所有代碼放入 HTML 并使用條件呼叫它，而不是通過復雜的方法在您的 TypeScript 中呼叫。
考慮使用*ngIf（Angular NgIf）或*ngSwitch（Angular NGSwitch）。
您的場景的示例：
<div *ngIf="value == true">
// Your HTML here
</div>
或者
<div *ngIf="value == true; else doSomethingElse">
// Your HTML here
</div>
<ng-template #doSomethingElse>
<div>
// If false, display this HTML.
</div>
</ng-template>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/403405.html
標籤：