如何在 AngularJS 2 中放置已选择的选项？

Posted 2023-03-13

【中文标题】如何在 AngularJS 2 中放置已选择的选项？

【英文标题】：How can I place a option has selected in AngularJS 2?

【发布时间】：2017-05-03 11:06:32

【问题描述】：

我试图弄清楚如何在显示时选择一个选项，使用旧的 javascript 样式代码或其他语言，我会放置一个 例如：

<select>
for (x =0 ; x < elements.size ; x++) 
<option value="element.id" if (element.id == selected.id ) print selected (endif)>element.name</option>

</select>

尝试在 angularjs 中执行此操作，我最终得到了如下所示的结果。

这是代码：

import  Component  from '@angular/core';

export class Category 
    id: number;
    name: String;
    parent_id: number;


const CATEGORIES: Category[] = [
    id: 1, name: "Calças", parent_id: 0,
    id: 2, name: "Calças de ganga", parent_id: 1,
    id: 3, name: "Calças Moleton", parent_id: 1,
    id: 4, name: "T-shirt", parent_id: 0,
    id: 5, name: "Casaco", parent_id: 0,
    id: 6, name: "Casaco Moleton", parent_id: 5,
    id: 7, name: "Sapato", parent_id: 0,
    id: 8, name: "Ténis", parent_id: 7,
    id: 9, name: "Sapato senhora", parent_id: 7,
    id: 10, name: "Cintos", parent_id: 0,
];

@Component(
  template: `
  This is the category page.
  Procurar:&nbsp;<input type="text" name="search" />
  <button >Procurar</button>

  <table class="table table-bordered table-hover">
    <tr>
    <th>Id</th>
    <th>Nome</th>
    <th>Categoria Pai</th>
    </tr>
    <tr *ngFor="let cat of categories" (click)="onSelect(cat)">
        <td>cat.id</td>
        <td><input type="text" value="cat.name" /></td>
        <td>
            <select>
            <option value="0">&nbsp;</option>
                <option *ngFor="let parent of categories" 
                value="parent.id">
                    parent.name
                </option>
            </select>
        </td>
    </tr>
    </table>

  `
)

export class CategoryComponent   
    categories = CATEGORIES;

    parents : Category[];

    selectedCategory: Category;

    onSelect(cat: Category): void 
        this.selectedCategory = cat;
    

    parentCategories() : Category[] 
        var parents : Category[];
        for (let cat of this.categories ) 
            if (cat.parent_id == 0 ) 
                parents.push(cat);
            
        
        return parents;
    

我怎样才能正确地做到这一点？

【参考方案1】：

将[(ngModel)]="selectedValue" 添加到您的选择中？引用angular docs：

<select class="form-control"  id="power"
      required
      [(ngModel)]="model.power" name="power">
  <option *ngFor="let pow of powers" [value]="pow">pow</option>
</select>

【讨论】：

谢谢，解决了，请问你在哪里找到select的例子？

***.com/questions/38880150/… 这也有帮助。

糟糕，忘记添加链接了。固定。