我有：

超文本标记语言

<div class="field">
    <label for="categories">Category</label>
    <p-dropdown [(ngModel)]="editedOrder.CategoryName" inputId="CategoryId" [options]="categories" placeholder="Select">
        <ng-template pTemplate="selectedItem">
            <span *ngIf="editedOrder.CategoryName" [class]="'category-badge category-' + trimOption(editedOrder.CategoryName)">{{editedOrder.CategoryName}}</span>
        </ng-template>
        <ng-template let-option pTemplate="item">
            <span [class]="'category-badge category-' + trimOption(option)">{{option}}</span>
        </ng-template>
    </p-dropdown>
</div>

字符串

组件

export class OrderDashboardComponent implements OnInit {
  orderId: string = '';
  
  order: Order = {};

  editedOrder: Order = {};

  orderDialog: boolean = false;

  submitted: boolean = false;

  categories: any[] = [];

  constructor(private route: ActivatedRoute, private orderService: OrderService, private messageService: MessageService, private changeDetectorRef: ChangeDetectorRef) { }

  ngOnInit(): void {
    this.route.params.subscribe(params => {
      this.orderId = params['id'];
      console.log('Order ID:', this.orderId);
    });

    this.orderService.getOrderById(this.orderId)
    .subscribe(order => {
      this.order = order;
      console.log('Order:', this.order);
    });
    
    this.orderService.getAllCategories().subscribe((categories) => {
      this.categories = categories.map(category => category.Name);
    });
  }

  editOrder(order: Order) {
    this.editedOrder = { ...order };
    this.orderDialog = true;
  }

  hideDialog() {
    this.orderDialog = false;
    this.submitted = false;
  }

  onGlobalFilter(table: Table, event: Event) {
    table.filterGlobal((event.target as HTMLInputElement).value, 'contains');
  }

  trimOption(option: string): string {
    return option ? option.trim() : '';
  }

  saveOrder() {
    this.submitted = true;
    this.orderService.updateOrder(this.orderId, this.editedOrder)
      .subscribe(order => {
        this.order = { ...this.editedOrder }; // Update order directly
        this.messageService.add({ severity: 'success', summary: 'Order saved successfully!', });
        this.orderDialog = false;
        this.submitted = false;
        this.editedOrder = {};
      });
  }
}

型
从用户的Angular 来看，该服务器按预期工作，他们可以选择订单等。
我的问题是：

• 更新订单需要发送ID。所以我需要一种方法来发送ID而不是名称。但也显示用户的名称而不是ID

我试过将NgModel改为CategoryId，但这会破坏整个目录（没有值显示等）。
我相信做一个查找的名称，并找到ID将工作，但有没有一个更简单的方法，只是绑定在我的HTML。我也需要这样做，我的其他选项在HTML。
请注意，Order和Category在我的后端（ASP.NET Web API）中是两个独立的实体。但看起来像这样（angular中的接口示例）：

export interface Order {
    Id?: string;
    Name?: string;
    Description?: string;

    CategoryName?: string;
    CategoryId?: string;
}

export interface OrderPutDto {
    Name?: string;
    Description?: string;
    CategoryId?: string;
}

型

编辑（附加信息）：

这是我在后端设计实体的方式：

public class OrderDto
{
    public int Id { get; set; }
    public string? Name { get; set; }
    public string? Description { get; set; }

    public int? CategoryId { get; set; }
    public string? CategoryName { get; set; }
}

型
示例类别实体：

public class Category
{
    public int Id { get; set; }
    public string? Name { get; set; }
    public ICollection<Order> Orders { get; set; } = new List<Order>();
}

型

更新#1：

已更改类别以分配整个对象，并更新了html：

<div class="field">
    <label for="categories">Category</label>
    <p-dropdown [(ngModel)]="editedOrder.CategoryName" inputId="CategoryId" [options]="categories" placeholder="Select" optionLabel="CategoryName" optionValue="CategoryId">
        <ng-template pTemplate="selectedItem">
            <span *ngIf="editedOrder.CategoryName" [class]="'category-badge category-' + trimOption(editedOrder.CategoryName)">{{editedOrder.CategoryName}}</span>
        </ng-template>
        <ng-template let-option pTemplate="item">
            <span [class]="'category-badge category-' + trimOption(option.Name)">{{option.Name}}</span>
        </ng-template>
    </p-dropdown>
</div>

型

更新#2：

更改为以下内容：

<div class="field">
    <label for="categories">Category</label>
    <p-dropdown [(ngModel)]="editedOrder.CategoryName" inputId="CategoryId" [options]="categories" placeholder="Select" optionValue="Name" optionLabel="Id">
        <ng-template pTemplate="selectedItem">
            <span *ngIf="editedOrder.CategoryName" [class]="'category-badge category-' + trimOption(editedOrder.CategoryName)">{{editedOrder.CategoryName}}</span>
        </ng-template>
        <ng-template let-option pTemplate="item">
            <span [class]="'category-badge category-' + trimOption(option.Name)">{{option.Name}}</span>
        </ng-template>
    </p-dropdown>
</div>

型
在更新方法方面起作用。当我点击保存时，它甚至更新UI，但它不会将ID发送到我的数据库。（如果我刷新，那么它会恢复到以前的值）。我的ID没有被发送到更新方法。假设是因为CategoryName而不是ID？？

更新#3：

这是一个只使用ID的工作示例：

<div class="field">
    <label for="categories">Category</label>
    <p-dropdown [(ngModel)]="editedOrder.CategoryId" inputId="CategoryId" [options]="categories" placeholder="Select" optionValue="Id">
        <ng-template pTemplate="selectedItem">
            <span *ngIf="editedOrder.CategoryId" [class]="'category-badge category-' + editedOrder.CategoryId">{{editedOrder.CategoryId}}</span>
        </ng-template>
        <ng-template let-option pTemplate="item">
            <span [class]="'category-badge category-' + trimOption(option.Name)">{{option.Name}}</span>
        </ng-template>
    </p-dropdown>
</div>

型

• 看起来不错（其他选项）
• selected值看起来不太好（因为它当然显示了ID）。如果我更新显示selectedItem的行：

<span *ngIf="editedOrder.CategoryName" [class]="'category-badge category-' + editedOrder.CategoryName">{{editedOrder.CategoryName}}</span>

型
然后当我选择其他选项时，它不会更新selecteditem（总是显示当前选项）-但它会显示名称。假设因为ngModel设置为SuiteId而不是SuiteName？我想要的是从用户的Angular 来看，它们不使用ID，只发送Name和幕后ID。