Angular下拉列表問題-單擊鏈接時動態選擇一個選項

Question

我正在使用Angular Reactive表單，我有一個下拉列表和一個輸入字段。 我有一個名為Category: {id, name, parent}的對象列表Category: {id, name, parent} 。 此列表顯示在一個表格中，該表格每行都有一個edit button/link 。 當單擊特定行的edit link ，我希望該行中的數據填充輸入字段，並且選擇選項將自動被選擇。

例如，這是我的表單和組件：

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

當用戶單擊“編輯”鏈接時，我希望該行中的內容填充上面的表單。 意味着將使用父列來選擇表單中的相應選擇選項。

該組件如下所示：

export class AddCategoryComponent implements OnInit {
  name: FormControl;
  parent: FormControl;
  childCategoryForm: FormGroup;
  selectedValue: any;

ngOnInit() {
    this.parent = new FormControl(this.selectedValue);
    this.name = new FormControl('');
    this.childCategoryForm = new FormGroup({name: this.name, parent: this.parent});
  }

// THIS IS THE MAIN FUNCTION WHERE I AM TRYING TO DYNAMICALLY SELECT AN  OPTION BASED ON THE VALUES IN THE ROW CLICKED BY THE USER. THIS IS THE FUNCTION THAT IS CALLED WHEN A USER CLICKS ON THE EDIT LINK

 editChildCategory(category: Category) {
    this.selectedValue = category.parent;
    // this.childCategoryForm.setValue({name: category.name, parent: category.parent});
    this.childCategoryForm.controls['name'].setValue(category.name);
    this.childCategoryForm.controls['parent'].setValue(category.parent['name']);
     this.selectedValue = category.parent['name'];
  }

}

上面的函數中的某些代碼已注釋掉，因為我一直在嘗試不同的事情，但無法正常工作。

Answer 1

對我來說，如何設置select的值prop是prob。 將html更改為以下內容：

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

因為，parent是一個對象，而不是一個字符串值，以后單擊編輯鏈接時可以將其與之匹配。 希望這可以幫助！