Question

您好我正在开发一个角度4的网络应用程序。我正在尝试设置下拉菜单的初始选择状态。不管我做了什么，虽然没有设置下拉菜单的初始选择状态。请参阅下面的html（我尝试将配方的健康选项设置为“是”和“不是”，具体取决于从数据库中返回的内容： -

<div class="row">
    <div class="col-md-12">
      <form [formGroup]="update_recipe_form" (ngSubmit)="createUpdateRecipeIngredientsDetailsForm()">
        <table class="table table-hover table-responsive table-bordered">

          <tr>
            <td>
              Healthy
            </td>
            <td><!--<li *ngIf="recipe?.healthy == 'Yes'"><h4><i class='fa fa-heart' aria-hidden='true'></i>Healthy</h4></li>-->
              <select name="isHealthy" formControlName="isHealthy" class="form-control" required>
                <option *ngFor="let healthy of healthyOptionsArray" [selected]="isHealthy==healthy.state" value="{{healthy.id}}">
                  {{healthy.state}}
                </option>
              </select>
              <div *ngIf="update_recipe_form.get('isHealthy').touched && update_recipe_form.get('isHealthy').hasError('required')"
                  class="alert alert-danger">Select whether recipe is healthy
              </div>
            </td>
          </tr>

          <tr>
            <td></td>
            <td>
              <button class="btn btn-primary" type="submit" [disabled]="update_recipe_form.invalid">
                  <span class="glyphicon glyphicon-edit"></span> Update
              </button>
            </td>
          </tr>
        </table>
      </form>
    </div>
  </div>

Typescript模块代码： -

import { Component, Output, Input, EventEmitter, OnChanges, ElementRef } from '@angular/core';
import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';

import { RecipeService } from '../recipe.service';

import { Recipe } from '../recipe';
import { Healthy } from '../healthy';

@Component({
  selector: 'app-update-recipe',
  templateUrl: './update-recipe.component.html',
  styleUrls: ['./update-recipe.component.css'],
  providers: [RecipeService, CategoryService, DifficultyService, ImageService, IngredientService, IngredientDetailService ]
})
export class UpdateRecipeComponent {

  @Output() show_read_recipes_event = new EventEmitter();

  @Input() recipe_id;

  update_recipe_form: FormGroup;

   healthyOptionsArray = [
    new Healthy(0, 'no'),
    new Healthy(1, 'yes')
  ]

  constructor(private _recipeService: RecipeService, 
              private formBuilder: FormBuilder,
              private elem: ElementRef
  )         
  { 
    // build angular form
    this.update_recipe_form = this.formBuilder.group({
      recipe_name: ["", Validators.required],
      recipe_id: '',
      isHealthy: ["", Validators.required],
    });
  }

  readRecipes(){
    this.show_read_recipes_event.emit({ title: "Read Recipes"});
  }

  ngOnChanges(){
    this._recipeService.readOneRecipeForUpdate(this.recipe_id)
      .subscribe(
        recipe => {
          console.log(recipe);
          this.update_recipe_form.patchValue({
            recipe_name: recipe.recipe_name,
            recipe_id: recipe.recipe_id,
            isHealthy: recipe.healthy,
          });
        }
      );
  }

这是健康类代码： -

export class Healthy{
    constructor(
        public id: number,
        public state: string
    )
    {}
}

希望有人可以让我摆脱困境（我已经被困在这一天了几天）。

Answer 1

您可以更改：

  constructor(props) {//state with categories
    super(props);
    this.state = {
      category: [],
      categories: [
        {
          name: 'categoryName',
          value: 'categoryName',
          field: 'E',
          options: [
            {
              name: 'subCategoryName',
              value: 'subCategoryName',
              field: 'F',
              options: [
                {
                  name: 'subSubCategoryName',
                  field: 'H'
                },
                {
                  name: 'subSubCategoryName',
                  field: 'H'
                }
              ]
            }
          ]
        }
      ]
    };
  }

//filter function
      categoryFilter() {
        return(
          <View style={{ flex:1, marginBottom: 10, backgroundColor: '#fff' }}>
            <Picker // here onValueChange I need to update my category picker so when selected it could display my category's subcategory picker items
              style={{ flex:1 }}
              onValueChange={(itemValue, itemIndex) => this.setState({category: [...this.state.category, itemValue]})}>
              {this.state.categories.map(category => {
                return(
                  <Picker.Item label={category.name} value={category.value} />
                );
              })}
            </Picker>
            <View style={{ flex:1, flexDirection: 'row', height: 40, marginTop: 10 }}>
              <View style={{ flex:5, backgroundColor: '#fff', padding: 8, flexDirection: 'row' }}>
                {this.state.category.map(category => {
                  return(
                    <Text>{ this.state.category.name }</Text>//this should be a list of selected category values like this: CategoryName subCategoryName subSubCategoryName
                  );         
                })}
              </View>
              <TouchableOpacity>
                <Text style={{ flex: 1, fontSize: 18, padding: 8, backgroundColor: '#faa320', textAlign: 'center' }}>{'>'}</Text>
              </TouchableOpacity>
            </View>
          </View>
        );
      }

为：

[selected]="isHealthy==healthy.state"

Answer 2

如果您设置的对象值与迭代器的while对象的对象值完全相同，则使用healthy指令将整个对象值绑定到表单。它有助于预先填充价值。

ngValue

Answer 3

这有效：

<select name="isHealthy" formControlName="isHealthy" class="form-control" required>
  <option *ngFor="let healthy of healthyOptionsArray" [selected]="healthy.state == isHealthy">
    {{healthy.state}}
   </option>
 </select>

angular 4下拉菜单设置选定状态

3 个答案: