Question

我正在尝试通过以下HTML代码更新打字稿中的变量“ selectedValue”：

 <select class="form-control" [(ngModel)]="selectedValue"  >
            <option *ngFor="let item of clients" [value]="item" >{{item}}</option>

          </select>
          <p>here is the the item :  {{selectedValue}}</p>

在这里，列表客户端只是一个字符串列表。

我尝试将value更改为ngValue，重新定位

标记并更改变量名称。

这是我的ts文件的外观：

export class BasicAccountComponent implements OnInit {
  accounts : Account[];
  clients: string [];
  selectedItem: string;
  columnDefs = [
    ...

  ];
  private defaultColDef;

  constructor(private accountService: AccountService) { 
    this.defaultColDef = {
      filter: true,
      width: 185,

    };
  }

  ngOnInit() {

    this.clients = [];
    this.selectedItem ='';
    //this.getAccountsByClient(this.selectedItem);
  }

  ngAfterViewInit() {
    // this.CalculatePageSize();
    this.getAccounts();
  }
  getAccounts() {
    this.accountService.getAccounts().subscribe(accounts => {
      this.accounts = accounts;
      this.accounts.forEach(account => {
        if (account != null){
          if (!this.clients.includes(account.client)){
            this.clients.push(account.client)
          }
      }
      })
      });

    }
  getAccountsByClient(client: string){
    this.accountService.getAccountsByClient(client).subscribe(accounts => {
      this.accounts = accounts;
      });
    }


}

变量selectedValue不会从空字符串更新。

Answer 1

.ts文件中没有名为selectedValue的变量。您需要将selectedItem重命名为selectedValue。

Answer 2

您在html中绑定了selectedValue，但在ts文件中声明了selectedItem。

ngModel不更新下拉菜单中的变量

2 个答案: