时间戳

首页 > 解决方案 > 如何使用 Angular 在 HTML 附加的 div 中加载动态数据

javascript - 如何使用 Angular 在 HTML 附加的 div 中加载动态数据

问题描述

这是我的html文件，即app.component.html

<button mat-raised-button color="primary" 
        mat-button class="nextButton" 
        (click)="calculatePremium()">
  Calculate
</button>


<div id="calculatedData">
                                    
</div>

上面的按钮用于通过调用api来计算数据，我得到了预期的输出，但是当点击这个按钮时，我想在上面提到的div中显示生成值，但是动态值没有显示在浏览器，该值显示为未定义。

这是我的 app.component.ts 文件

calculatePremium(){
    console.log("calculating");
    let frmData: any = this.form.value;
    this.dobVal = frmData.contact.dob;
    let onlyYear = String(this.dobVal).split(' ')[3];
     
    // AGE    
    let age = (Number(new Date().getFullYear()) - Number(onlyYear));
        

    // NAME
    let name = frmData.contact.firstName;    
    

    // GENDER    
    let gender = frmData.contact.gender;    


    // smoking    
    let smoker = frmData.basicInfo.isSmoker;    


    // no of dependents    
    let dependentsCount = Number(frmData.basicInfo.adults) + Number(frmData.basicInfo.children);    
    

    let finalObj = {
        'name': name,      
        'age': age,      
        'gender': gender,      
        'smoking': smoker,      
        'dependent': dependentsCount
      }    

    this.calcualte.calculatePremium(finalObj).subscribe(
      (data: any) => {
        //success        
        console.log(data);        
        Swal.fire('Plan Amount', 'is  ' + data.name + data.amount, 'success');        
        this.amount = data.amount;        
        console.log(this.amount);        
        
        //alert('success');     
      },      
      (error) => {        
        //error        
        console.log(error);      
      });    
      console.log(this.amount);        
      const x = document.getElementById('calculatedData');  

  This is where I want to show the dynamic value, but the amount is shown as undefined when 
  rendered on the browser.

      x.innerHTML = `<div class="appendme">${this.amount}</div>`;    
      const len = x.getElementsByTagName('div').length;    
      console.log(len);  
  }}

标签： javascriptcssangulartypescriptdynamic

解决方案

如果您正在开始 Angular，请阅读他们的简短教程。它介绍了所有基础知识。

在您的情况下，您需要使用*ngIf检查amount变量是否已定义和插值来呈现值。

<div *ngIf="!!amount">
  {{ amount }}                                    
</div>

推荐阅读