Question

在我开始之前，我尝试了以下方法

https://www.angularjswiki.com/angular/how-to-bind-a-select-element-to-object-in-angular/ https://www.codeproject.com/Questions/1278097/How-do-you-get-the-value-of-the-selected-option-in Associate select value to ngModel in Angular 4 How to assign selected value to "Select" when value is of class object in angular 2 _ https://docs.angularjs.org/api/ng/directive/select

用PHP这么容易做的事花了我8个小时，但我什至还没有接近。我不明白我在做什么错了？

TS文件

shopstates: any = {};
selectedObject: any;
this.shopstates = [
      { statename: 'Australian Capital Territory', statecode: 'ACT' },
      { statename: 'New South Wales', statecode: 'NSW' },
      { statename: 'South Australia', statecode: 'SA' },
      { statename: 'Queensland', statecode: 'QLD' }
 ];

组件html文件

<select [(ngModel)]="selectedObject" class="form-control" (change)=consoleLog()>
    <option *ngFor="let state of shopstates" [ngValue]="state">{{ state.statename }} ({{ state.statecode }})</option>
</select>

选定状态为{{selectedObject.state}}

这非常令人沮丧。我将进行更改以尝试将值传递到TS文件，但我不想这样做，而且2.不知道如何传递值

感谢任何指导或帮助

Answer 1

您可以尝试以下操作。

在select的更改事件上将selectedObject传递给consoleLog(selectedObject)方法。
selectedObject包含整个状态对象，因此您不能像selectedObject.state那样进行访问。应该是selectedObject.statename / selectedObject.statecode

工作https://mpr.datamart.ams.usda.gov/

模板

<select [(ngModel)]="selectedObject" class="form-control" (change)="consoleLog(selectedObject)">
  <option *ngFor="let state of shopstates" [ngValue]="state">{{ state.statename }} ({{ state.statecode }})</option>
</select>
<div>
  <p><b>Selected state Name : </b> {{ selectedObject.statename }}</p>
  <p><b>Selected state Code : </b> {{ selectedObject.statecode }}</p>
</div>

打字稿

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  name = "Angular " + VERSION.major;

  shopstates = [{
      statename: "Australian Capital Territory",
      statecode: "ACT"
    },
    {
      statename: "New South Wales",
      statecode: "NSW"
    },
    {
      statename: "South Australia",
      statecode: "SA"
    },
    {
      statename: "Queensland",
      statecode: "QLD"
    }
  ];
  selectedObject: any = this.shopstates[0];

  consoleLog(statename) {
    console.log(statename);
  }
}

Answer 2

就我而言，我没有使用 ngModel。这个方法很适合我。
模板 HTML 文件

<select class="form-control" #Select (change)="consoleLog(Select.value)">
   <option *ngFor="let state of shopstates" [value]="state.statename">{{ state.statename }} ({{ state.statecode }})</option>
  </select>

TS 文件

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  name = "Angular " + VERSION.major;
  selectedState: any;

  shopstates = [{
      statename: "Australian Capital Territory",
      statecode: "ACT"
    },
    {
      statename: "New South Wales",
      statecode: "NSW"
    },
    {
      statename: "South Australia",
      statecode: "SA"
    },
    {
      statename: "Queensland",
      statecode: "QLD"
    }
  ];


  consoleLog(statename:any){
        this.selectedState = statename;
        console.log('curent state is ' + this.selectedState);
      }
}

您可以将 statename 替换为 statecode，具体取决于您希望在模板中使用什么值

Angular 9选择绑定到模型

2 个答案: