角度4 ng选择不起作用

I cannot get ng-selected to work. I first tried just adding selected in the option tag, but after reading it seems like I need to use ng-select. I've tried doing ng-selected="true" and ng-selected="selected" with no luck. I've tried doing the recommended fixes from other stackeoverflow questions but none seem to work for me. At one point (in another html form bc I am having this same problem) it seemed to work, but now it magically stopped.

我无法选择工作。我首先尝试在选项标签中添加选中，但在阅读之后，我似乎需要使用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>

Component

零件

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)
    });
  }
}

1 个解决方案

#1

In your template, your option's ng-selected is bound to a variable called 'selected'. That means in your component, you need to set this variable to true at the beginning, something like this:

在您的模板中，您选择的ng-selected被绑定到一个名为“selected”的变量。这意味着在您的组件中，您需要在开头将此变量设置为true，如下所示：

export class CaloricIntakeComponent{

    selected : boolean;

    ......

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

    }

}

Update

Make sure you have values in the options, like this:

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

<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>

Then, you do not need ng-selected at all. You can just initiate with your custom values in the component.

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

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