Javascript 角度下拉列表问题-单击链接时动态选择选项

Javascript 角度下拉列表问题-单击链接时动态选择选项,javascript,angular,Javascript,Angular,我使用角度反应形式,我有一个下拉列表和一个输入字段。我有一个名为类别:{id,name,parent}的对象列表。此列表显示在一个表格中,该表格的每一行都有编辑按钮/链接。单击特定行的编辑链接时,我希望该行中的数据填充输入字段,并自动选择选择选项 例如,以下是我的表单和组件: <form [formGroup]="childCategoryForm" (ngSubmit)="saveOrUpdateChildCategory(childCategoryForm.value)" autoCo

我使用角度反应形式,我有一个下拉列表和一个输入字段。我有一个名为
类别:{id,name,parent}
的对象列表。此列表显示在一个表格中,该表格的每一行都有
编辑按钮/链接。单击特定行的
编辑链接
时,我希望该行中的数据填充输入字段,并自动选择选择选项

例如,以下是我的表单和组件:

<form [formGroup]="childCategoryForm" (ngSubmit)="saveOrUpdateChildCategory(childCategoryForm.value)" autoComplete="off">
          <div class="form-group row" [ngClass]="{'error': !validateParentCategory()}">
            <label class="col-form-label col-md-2" for="parent">Parent Category</label>
            <div class="col-md-6">
              <select [(ngModel)]="selectedValue" class="form-control" formControlName="parent" name="parent" id="parent">
                <option [ngValue]=null>--- select parent category ---</option>
                <option [ngValue]="parent" *ngFor="let parent of parentCategories">{{parent.name}}</option>
              </select>
            </div>
          </div>
          <div class="form-group row" [ngClass]="{'error': !validateCategoryName()}"> <!--  && categoryForm.controls.name?.errors.pattern -->
            <label class="col-form-label col-md-2" for="name">Category Name</label>
            <!--em *ngIf="!validateCategoryName()">Required</em>
            <em *ngIf="!validateCategoryName()">Required</em-->
            <div class="col-md-6">
              <input type="text" formControlName="name" name="name" class="form-control" id="name" placeholder="Category name..." />
            </div>
          </div>
          </div>
          <div class="form-group row" *ngIf="childCategoryFormEditMode">
            <label class="col-form-label col-md-2" for="name"></label>
            <div class="btn-toolbar col-md-6">
              <button type="button" (click)="cancelEditChildrenCategory()" class="btn btn-outline-secondary btn-sm mr-2">Cancel edit</button>
              <button type="submit" class="btn btn-info btn-sm">Submit edit</button>
            </div>
          </div>
        </form>



<table class="table table-striped">
            <thead>
            <tr>
              <th scope="col">#</th>
              <th scope="col">Name</th>
              <th scope="col">Parent</th>
              <th scope="col">Edit</th>
              <th scope="col">Delete</th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let child of childrenCategories; index as i">
              <th scope="row">{{i+1}}</th>
              <td>{{child.name}}</td>
              <td>{{child.parent['name']}}</td>
              <td class="text-primary"><a class="deco-none" (click)="editChildCategory(child)"><i class="fa fa-edit"></i>Edit</a></td>
              <td class="text-danger"><a class="deco-none" (click)="deleteCategory(child)" ><i class="fa fa-remove"></i>Delete</a></td>
            </tr>
            </tbody>
          </table>

上面函数中的一些代码在注释中,因为我一直在尝试不同的方法,但它不起作用。

对于我来说,如何设置select的值是个问题。 将html更改为以下内容:

<option [ngValue]="parent.name" *ngFor="let parent of parentCategories">


因为,父对象是一个对象,而不是一个字符串值,您可以在稍后单击“编辑链接”时与之匹配。希望这有帮助

对于我来说,如何设置select的值是个问题。 将html更改为以下内容:

<option [ngValue]="parent.name" *ngFor="let parent of parentCategories">


因为,父对象是一个对象,而不是一个字符串值,您可以在稍后单击“编辑链接”时与之匹配。希望这有帮助

对我来说,如何设置select的值是个问题。将html更改为
@User3250谢谢您的评论。您已向我更正了如何设置select prop的值。将html更改为
@User3250谢谢您的评论。你说得对