如何将数据值动态添加到生成的 HTML - Ionic Angular

Question

我有以下代码：

@Component({
  selector: 'app-accountdetailed',
  templateUrl: './accountdetailed.page.html',
  styleUrls: ['./accountdetailed.page.scss'],
})
export class AccountdetailedPage implements OnInit {

  protected itemId = '';

  public item = {
    email: 'email-1@hotmail.co.uk',
    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 class="white-text" 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 class="white-text" 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 class="white-text" 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 class="white-text" 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 }} 它不起作用。

谢谢

Answer 1

您应该将所有代码放入您的 HTML 并使用条件调用它，而不是通过复杂的方法在您的 TypeScript 中调用它。

考虑使用 *ngIf (Angular NgIf) or *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>

如何将数据值动态添加到生成的 HTML - Ionic Angular

How to dynamically add data values to generated HTML - Ionic Angular

ionic-framework

angular