0

我有这个数组...

public incidents: any[] = [
  {
    id: 1,
    name: "Default Case Set",
    type: "CASEWORK",
    str: 34,
    mtdna: 0,
    ystr: 0,
    xstr: 0,
    snps: 0
  }
]

我将它传递给这样的模态......

public openEditModal(id: number): void {

  this.incidentToBeEdited = this.incidents.filter(result => result.id == id).pop();

  const initialState: ModalOptions = {
    initialState: {
      items: this.incidentToBeEdited,
      title: 'Edit Incident'
    }
  };

  // Close modal
  this.bsModalRef = this.modalService.show(EditModalComponent, initialState);
}

问题是事件数组中对象中的键是自动按字母顺序排列的。

当我控制“this.incidentToBeEdited”变量时，我得到了这个......

{
    mtdna: 0
    name: "Default Case Set"
    snps: 0
    str: 34
    type: "CASEWORK"
    xstr: 0
    ystr: 0
}

因此，发送到模态（用于显示目的）的对象会自动按字母顺序排列。

我不希望这样，因为我希望字段像在表中那样显示，这就是它们在原始事件数组中的样子。

无论如何我可以覆盖Angular对对象按字母顺序排列的需要吗？

这是 EditModalComponent 的代码...

export class EditModalComponent implements OnInit {

  constructor(
    public bsModalRef: BsModalRef,
    private http: HttpClient,
    private formBuilder: FormBuilder) {
    this.items = this.items;
    this.bsModalRef = this.bsModalRef;

    this.editModal = this.formBuilder.group({});    
  }

  // Page loading properties

  public httpRequestInProgress: boolean = false;
  public pageLoaded: boolean = false;
  public pageLoadError: string = '';
  public pageLoading: boolean = true;

  // Properties

  public editModal: FormGroup;

  public items?: any;

  public title?: string;

  // Methods

  ngOnInit(): void {

    this.editModal = this.formBuilder.group(
      this.items
    )
    console.log("this.items", this.items);

    // Remove id from list of items
    const itemsInAnArray = [this.items];
    itemsInAnArray.forEach((item: any) => delete item.id);

    this.pageLoading = false;
    this.pageLoaded = true;

  }

}

这是 EditModalComponent 的 HTML...

<form [formGroup]="editModal" *ngIf="this.items">

        <div class="row">

          <div class="col-sm-12">

            <div *ngFor="let item of this.items | keyvalue">

              <div class="col-sm-12 mb-3">
                <label class="text-capitalize" for="firstName">{{item.key}}</label>
                <input class="form-control"
                        id="{{item.key}}"
                        value="{{item.value}}"
                        formControlName="{{item.key}}">
              </div>

            </div>          

          </div>

          <div class="mt-3">
            <button class="btn btn-primary float-start"
                    type="button"
                    (click)="saveAsync()">
              Save
            </button>
            <button class="btn btn-secondary me-1 float-start"
                    type="button"
                    (click)="bsModalRef.hide()">
              Cancel
            </button>
          </div>

        </div>

      </form>
    ```
4

0 回答 0