Question

我无法让ng-selected工作。我首先尝试在选项标记中添加selected，但在阅读之后，我似乎需要使用ng-select。我试过没有运气ng-selected="true"和ng-selected="selected"。我尝试过从其他stackeoverflow问题中做出推荐的修复，但似乎没有一个对我有用。在某一点（在另一个html形式bc我有同样的问题）它似乎工作，但现在它神奇地停止。

<div class="col-lg-6">
  <div class="panel panel-default">
    <div class="panel-heading">Caloric Intake Recommendation</div>
    <div class="panel-body">
      <form [formGroup]="myForm" (ngSubmit)="onSubmit()">
        <div class="form-group row">
          <label for="weight" class="col-lg-2 col-form-label">Weight</label>
          <div class="col-lg-10">
            <input
                type="number"
                class="form-control"
                id="weight"
                formControlName="weight"
                placeholder="Weight">
          </div>
        </div>
        <div class="form-group row">
          <label for="goal" class="col-lg-2 col-form-label">Goal</label>
          <div class="col-lg-10">
            <select class="form-control" formControlName="goal" id="goal">
              <option ng-selected="selected">Lose Weight</option>
              <option>Maintain Weight</option>
              <option>Gain Mass</option>
            </select>
          </div>
        </div>
        <button
            class="btn btn-primary"
            type="submit"
            [disabled]="!myForm.valid">Submit
        </button>
        <hr>
        <div class="col-sm-4">
          <label class="col-sm-2 col-form-label">Your Recommended Protein:</label>
          <input type="text" value={{this.protein}}>
        </div>
        <div class="col-sm-4">
          <label class="col-sm-2 col-form-label">Your Recommended Carbs:</label>
          <input type="text" value={{this.carbs}}>
        </div>
        <div class="col-sm-4">
          <label class="col-sm-2 col-form-label">Your Recommended Fats:</label>
          <input type="text" value={{this.fat}}>
        </div>
      </form>
    </div>
  </div>
</div>

组件

import {Component} from "@angular/core";
import {FormControl, FormGroup, Validators} from "@angular/forms";
import {CaloricIntakeClass} from "./caloric-intake.class";

@Component({
  selector: 'app-caloric-intake',
  templateUrl: './caloric-intake.component.html',
  styleUrls: ['./caloric-intake.component.css']
})
export class CaloricIntakeComponent{
  myForm: FormGroup;
  caloricIntake: CaloricIntakeClass;
  weight: number;
  goal: string;
  protein: number;
  carbs: number;
  fat: number;


  onSubmit() {
    this.weight = this.myForm.value.weight;
    this.goal = this.myForm.value.goal;
    this.myForm.reset();

    this.caloricIntake = new CaloricIntakeClass(this.weight);
    if (this.goal === 'Cutting'){
          this.caloricIntake.cuttingIntake();
    } else if (this.goal === 'Bulking'){
          this.caloricIntake.bulkingIntake();
    } else {
          this.caloricIntake.maintaingIntake();
    }
    this.protein = this.caloricIntake.getProtein();
    this.carbs = this.caloricIntake.getCarbs();
    this.fat = this.caloricIntake.getFat();
  }

  ngOnInit() {
    this.myForm = new FormGroup({
      weight: new FormControl(null, Validators.required),
      goal: new FormControl(null, Validators.required)
    });
  }
}

Answer 1

在您的模板中，您选择的选项被绑定到一个名为“已选择”的变量＆＃39;。这意味着在您的组件中，您需要在开始时将此变量设置为true，如下所示：

export class CaloricIntakeComponent{

    selected : boolean;

    ......

    ngOnInit() {
        this.selected = true;
        ......

    }

}

更新

确保选项中包含值，如下所示：

<select class="form-control" formControlName="goal" id="goal">
    <option value="lose_weight">Lose Weight</option>
    <option value="maintain_weight">Maintain Weight</option>
    <option value="gain_mass">Gain Mass</option>
</select>

然后，您根本不需要选择ng。您只需使用组件中的自定义值启动即可。

ngOnInit() {
    this.myForm = new FormGroup({
        weight: new FormControl(null, Validators.required),
        goal: new FormControl("lose_weight", Validators.required)
    });
}

Angular 4 ng选择不起作用

1 个答案:

更新