错误：没有带有未指定名称属性的表单控件的值访问器

Question

我正在创建一个应用程序，该应用程序具有使用管道过滤掉数据的控件。更具体地说，该应用程序可以使用ngModel order按字母顺序对数据进行排序。

我遇到以下错误：

Error: No value accessor for form control with unspecified name attribute AppComponent.html:15

第15行是这样：

<option value="150">150</option>

尽管错误消息可能会说什么，但在修改第24行以便对此进行更改时，错误会消失：

<th [(ngModel)]="order" (click)="setOrder('address')">Address</th>

对此：

<th>Address</th>

完整的app.component.html代码：

<div class="container">
  <h1>Automatic Teller Machines</h1>

  <div class="form-group row">
    <label for="municipality" class="col-sm-2 col-form-label">Municipality</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="Municipality" [(ngModel)]="Municipality" placeholder="Municipality"> </div>
  </div>
  <div class="form-group row">
    <label for="results_per_page" class="col-sm-2 col-form-label">Results per page</label>
    <div class="col-sm-10">
      <select class="form-control" id="results_per_page" [(ngModel)]="per_page">
        <option value="50">50</option>
        <option value="100">100</option>
        <option value="150">150</option>
      </select>
    </div>
  </div>


  <table class="table table-bordered">
    <thead>
      <tr>
        <th [(ngModel)]="order" (click)="setOrder('address')">Address</th>
        <th>Location</th>
        <th>Availability</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let atm of atms | search:municipality | pagination:per_page">
        <td>{{ atm.target_address }}, {{ atm.postalcode }}
          {{ ottoautomaatti.municipality}}</td>
        <td>{{ ottoautomaatti.location}}, {{ ottoautomaatti.location_type}}</td>
        <td>{{ ottoautomaatti.availability }} {{ ottoautomaatti.availability_details }}</td>
      </tr>
    </tbody>
  </table>

</div>

完整的app.component.ts：

import { Component } from '@angular/core';
import { ATMsService } from '../app/atms.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  municipality: string;
  atms: atm[] = [];
  per_page: number = 50;
  order: string = "address";

  constructor(public service: ATMsService) { }

  ngOnInit() {
    this.service.getAll().then((data) => {
      this.atms = data;
    })
  }

  setOrder = (order: string) => {
    this.order = order;
  }

}