Angular中如何在组件HTML展示component.ts函数返回值而非console.log

步骤1：在组件类中添加存储结果的属性 #

在你的组件.ts文件里，新增一个类属性用于保存appartenenza函数的返回结果：

export class YourComponent {
  // 保留原有属性...
  affinityResult: string = ''; // 新增属性，专门存储匹配结果
  // ...
}

步骤2：修正appartenenza函数的返回逻辑 #

原函数里return console.log(...)的写法错误，因为console.log返回的是undefined，需要改成直接返回字符串内容：

appartenenza(ttp_field: any, ttp_db: any) {
    const massimo = Math.max(...punteggi); // 假设punteggi是函数内已定义的变量

    if (massimo === 0) {
        return "Nessuna stringa in comune";
    }

    const indice = punteggi.indexOf(massimo);
    // 直接返回拼接好的结果字符串
    return `Gruppo con più affinità: ${this.ttp_db[0][indice]}`;
}

步骤3：在onSubmit中接收返回值并赋值给属性 #

修改onSubmit方法，把appartenenza函数的返回值存入之前定义的属性：

onSubmit() {       
    this.firebase.getData(this.url)
    .subscribe((data: any) =>{
        this.ttp_db = Object.keys(data).map((key)=> {return data[key]});
        this.ttp_field = Object.keys(this.ttp_form.value).map((key)=> {return this.ttp_form.value[key]});
        // 将函数返回值赋值给affinityResult
        this.affinityResult = this.appartenenza(this.ttp_field, this.ttp_db);
    });
}

步骤4：在HTML模板中展示结果 #

在组件HTML的按钮区域下方，添加绑定了affinityResult的元素，用于展示结果：

<div class="col-md-12 pt-2">
     <button type="button" class="btn btn-success btn-sm" (click)="addField()">Add TTP</button>
     <button type="submit" class="btn btn-outline-primary" [disabled]="!ttp_form.valid">Submit</button>
     <!-- 新增结果展示区域，用*ngIf确保有结果时才显示 -->
     <div class="mt-3 text-primary" *ngIf="affinityResult">
         {{ affinityResult }}
     </div>
</div>

内容的提问来源于stack exchange，提问作者Alessandro