Question

选择框仅显示默认值，而不显示组件中的其他值。我试图在选择框中显示accType值。我做错什么了吗？我是新手。请帮忙。

组件：

import { Component, OnInit } from '@angular/core';
import { AccType } from '../models/accType';


@Component({
  selector: 'app-account-form',
  templateUrl: './account-form.component.html',
  styleUrls: ['./account-form.component.css']
})
export class AccountFormComponent implements OnInit {

    accTypes = [
        { id: "S", name: "Supplier" },
        { id: "C", name: "Customer" }
    ];


    ngOnInit() {

        console.log("AccType",this.accTypes);
  }

}

HTML：

    <h2>Create new Account</h2>
<br />
<form #f="ngForm" (ngSubmit)="submit()">
    <div class="form-group row">
        <label class="col-md-2 col-form-label">Account Name</label>
        <div class="form-group col-md-3">
            <input type="text" class="form-control" name="accountName" required>
            <div class="alert alert-danger" *ngIf="accountName.touched && !accountName.valid">Please provide account name</div>
        </div>
    </div>

    <div class="form-group row">
        <label for="accType" class="col-md-2 col-form-label">Account Type</label>
        <div class="form-group col-md-3">
            <select class="form-control" [(ngModel)]="accType.id">
                <option value="">Select Accout Type</option>
                <option *ngFor="let accType of accTypes" [ngValue]="accType"> {{accType.name}} </option>
            </select>
            <!-- <div class="alert alert-danger" *ngIf="accType.touched && !accType.valid">Please specify the supplier</div>-->
        </div>
    </div>
</form>

Answer 1

<select [(ngModel)]="selected" name="status" placeholder="select" (ngModelChange)="onOptionsSelected()">
        <option *ngFor="let sta of accTypes" [ngValue]="sta.id">{{sta.name}}</option>
    </select>
<div>
  {{filtered|json}}
</div>

/*************** ts file ***************/
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
 selected:any = 'S';
filtered :any;
    accTypes = [
        { id: "S", name: "Supplier" },
        { id: "C", name: "Customer" }
    ];

constructor() {

        }

onOptionsSelected() {
 console.log(this.selected);  
    }
}

绑定表单组件时，“选择”框不显示任何值

1 个答案: