Question

我有国家选择包含第一个组件定义的国家：

public countries: Country[];
private selectedCountry: Country;

我在html中有一个选择：

<select [(ngModel)]="company.country" (change)="onSelectCountry($event)" style="width: 120px">
        <option *ngFor="let c of countries" [ngValue]="c">{{c.country.name}}</option>
      </select>

改变方法：

onSelectCountry(val)  {
    this.selectedCountry = val.target.value;
    alert(this.selectedCountry.name);
  }

我得到了未定义的＆＃39;如果我省略＆＃39; .name＆＃39;我得到了＆＃39; 0：对象＆＃39;其中0是数组中项的索引，我怎么能从这里得到Country对象？

Answer 1

将您的值从c更改为c.country

<option *ngFor="let c of countries" [ngValue]="c.country">{{c.country.name}}</option>

Answer 2

您可以处理change而不是处理ngModelChange DOM事件，该$event会将所选国家/地区作为<select ... (ngModelChange)="onSelectCountry($event)">参数传递：

onSelectCountry(country)  {
    this.selectedCountry = country;
    ...
}

事件处理程序将定义为：

company.country

请注意，由于双向数据绑定，ngModelChange也会设置为所选国家/地区。处理if (pGraph -> vertices[tmp].gcc == NULL){ pGraph->vertices[tmp].gcc = strdup(storage); }else{ // pGraph->vertices[tmp].gcc points to a valid memory location printf("the gcc is %s\n",pGraph->vertices[tmp].gcc); strcpy(real_gcc,pGraph->vertices[tmp].gcc); strcat(real_gcc,"*"); strcat(real_gcc,storage); // ** pGraph->vertices[tmp].gcc is overwritten ** pGraph->vertices[tmp].gcc = strdup(real_gcc); if (pGraph->vertices[tmp].multi_gcc == 0){ pGraph->vertices[tmp].multi_gcc = 1; }对于进行一些额外处理仍然有用。

Answer 3

请查看此处的文档：https://angular.io/api/forms/SelectControlValueAccessor

您确定需要在函数内使用$ event.target.value吗？默认情况下它不是传递值而不是整个事件对象吗？

我认为你只需要以下内容：

onSelectCountry(val)  {
   this.selectedCountry = val;
   alert(this.selectedCountry);
}

Answer 4

在html组件中使用此代码

<select class="form-control" name="filterColumn" (change)="onChange($event.target.value)">
    <option value="" selected disabled hidden>Select ...</option>
    <option *ngFor="let column of columns" [value]="column.propertyName">
        {{ column.title }}
    </option>
</select>

如果要访问元素选择或更改所选项目，请使用此代码

onChange(value){
      //alert(JSON.stringify(value));
      console.log(value);
    }

Answer 5

这对我有用：

<select #ctrl="ngModel" [(ngModel)]="selectedCountry">
    <option *ngFor="let c of countries" value="c.country.name">{{c.country.name}}</option>
</select>

您的selectedCountry变量应像这样自动更新，您甚至不需要onChange事件即可对其进行更新。您仍然可以将onChange事件用于警报或其他所需的事件。

如何选择角度5的项目？

5 个答案: