如何使用 Angular 在 HTML 附加 div 中加載動態數據

Question

這是我的 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);  
  }} 

Answer 1

如果您開始使用 Angular，請閱讀他們的簡短教程。 它介紹了所有基礎知識。

在您的情況下，您需要使用*ngIf來檢查是否定義了amount變量並使用插值來呈現值。

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