displayInput(): void { console.log('姓名:',this.name); console.log('电话号码:', this.phone); //在控制台显示。 }该事件显示在控制台上，如何把他的值显示到页面里

在Angular中，如果你想要将`displayInput()`函数中的数据（如`name`和`phone`）显示在页面上，而不是仅在控制台打印，你可以通过模板来动态绑定它们。首先，假设你在组件类中已经设置了`name`和`phone`的数据属性，可以这样做：

1. 在组件的HTML模板中创建元素，比如`<p>`或`<span>`，来显示这些值：

<div *ngIf="name">
  <p>姓名: {{ name }}</p>
</div>

<div *ngIf="phone">
  <p>电话号码: {{ phone }}</p>
</div>

这里我们用了`*ngIf`条件指令，确保只有当`name`或`phone`存在时才展示其值。

2. 更新`displayInput()`函数，使其不再直接打印到控制台，而是更新视图中的值：

export class YourComponent {
  // ...

  displayInput(): void {
    this.updateView();
  }

  private updateView(): void {
    console.log('姓名:', this.name);
    console.log('电话号码:', this.phone);
    this.nameForDisplay = this.name; // 或者 this.phoneForDisplay = this.phone;
    // 如果你想分别更新姓名和电话显示字段，添加这两个变量
  }
}

然后在模板中引用新的变量：

<p>姓名显示: {{ nameForDisplay }}</p>
<p>电话号码显示: {{ phoneForDisplay }}</p>

这样，每当`displayInput()`被调用，`updateView()`会更新这些显示字段的内容。