角材料自动完成组件在页脚而不是页眉上显示选项

我为导航栏创建了一个角度组件,我想使用自动完成功能实现搜索功能,我链接了后端并创建了服务,并且可以完美地检索数据,但是问题是它在页脚上显示了检索到的数据!

<nav class="navbar navbar-expand-lg navbar-light bg-light mynavbar">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data- target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
  <ul class="navbar-nav mr-auto">
    <li class="nav-item active">
      <a class="nav-link nav-link-r" href="#">Home <span class="sr-only">(current)</span></a>
    </li>
    <li class="nav-item">
      <a class="nav-link nav-link-r" href="#">Link</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle nav-link-r" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown
      </a>
      <div class="dropdown-menu" aria-labelledby="navbarDropdown">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Something else here</a>
      </div>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Disabled</a>
    </li>
  </ul>
 <div> 

  <!-- simple autocomplete component from material.angular.io -->
  <form class="example-form">
    <mat-form-field class="example-full-width">
      <input type="text"
             placeholder="Pick one"
             aria-label="Number"
             matInput
             [formControl]="myControl"
             [matAutocomplete]="auto">
      <mat-autocomplete #auto="matAutocomplete">
        <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
          {{option}}
        </mat-option>
      </mat-autocomplete>
    </mat-form-field>
  </form>
</div>  
</div>
</nav>

navbar是引导程序的模板,该组件中唯一的其他CSS样式如下

.mynavbar{
background-color: #6EB06B !important;
}
.nav-link-r{
color: white !important;
font-size: large;
}
.autofill-space{
overflow: visible !important;
}
.option-items{
color: tomato;
 }
.example-form {
min-width: 150px;
max-width: 500px;
width: 100%;
}

.example-full-width {
width: 100%;
}

我希望将检索到的选项显示在文本输入下,就像在原始组件中一样,但是这会一直在页脚区域中显示它,从而跳过了整个网站正文,我在做什么错呢?