Question

我是Angular的初学者。我正在尝试按字母顺序对下拉式FormArray进行排序。

component.html

<label 
    class="custom-control custom-checkbox" 
    *ngFor="let car of carsControls; let i = index" 
    [hidden]="!cars[i]?.show">
        <input type="checkbox" class="custom-control-input" [formControl]="car" />
        <span class="custom-control-label" [innerHTML]="cars[i]?.name"></span>
</label>

component.ts

ngOnInit() {
    this.cars.sort((a, b) => a.name.localeCompare(b.name));
}

这将对下拉列表的标签进行排序，而不对carsControl进行排序。因此它无法正常工作。我不知道如何按字母顺序订购AbstractControl。还是我必须对carsFormGroup进行排序？

编辑：

我正在获得这样的控件：

get carsControls() {
    return (this.carFormGroup?.get('cars') as 
    FormArray)?.controls;
  }

FormGroup：

 carFormGroup = this.formBuilder.group({
    filter: [''],
    cars: this.formBuilder.array([])

Answer 1

如果我能看到您如何定义public Task<string> InstallApplication(string deployManifestUriStr) { TaskCompletionSource<string> tcs = new TaskCompletionSource<string>(); try { Uri deploymentUri = new Uri(deployManifestUriStr); iphm = new InPlaceHostingManager(deploymentUri, false); } catch (Exception uriEx) { tcs.SetResult(uriEx.Message); } iphm.GetManifestCompleted += new EventHandler<GetManifestCompletedEventArgs>(async (sender, e) => { if (e.Error != null) { tcs.SetResult(e.Error.Message); } try { iphm.AssertApplicationRequirements(true); } catch (Exception ex) { tcs.SetResult(ex.Message); } iphm.DownloadApplicationCompleted += new EventHandler<DownloadApplicationCompletedEventArgs>((o, ev) => { if (ev.Error != null) { tcs.SetResult(ev.Error.Message); } tcs.SetResult("Complete"); }); try { iphm.DownloadApplicationAsync(); } catch (Exception downloadEx) { tcs.SetResult(downloadEx.Message); } }); iphm.GetManifestAsync(); return tcs.Task; }变量和carsControls变量以使答案更完整，那将很有帮助。

我将使用Object.keys从cars获取每个控件名称并对它们进行排序。然后在模板中对其进行迭代。

app.component.ts：

FormGroup

app.component.html：

export class AppComponent  {
  myForm: FormGroup;

  get controls(){
    //Object.keys() will return each form control name
    //Then sort them alphabetically 
    return Object.keys(this.myForm.controls).sort();
  }

  constructor(private fb: FormBuilder){}

  ngOnInit(){
    //Define my form - note how they're not alphabetical
    this.myForm = this.fb.group({
      "car": new FormControl(false),
      "dinosaur": new FormControl(false),
      "ant": new FormControl(false)
    });
  }
}

这是stackblitz，演示了它的工作原理。

如何按字母顺序按角度排序AbstractControl FormArray

1 个答案: