打字稿:在我的组件 class 中初始化接口后,将整个对象放在一个 属性 下

Typescript: Getting the entire object under one property after initializing the interface in my component class

在我的组件 class.

中初始化模型后,我从我的模型中获取整个对象 属性

Е这是我的 model/interface:

export interface CompanyDropDownItem {
    CompanyAn: number;
    CompanyCode: string;
    CompanyName: string;
    Inactive: boolean;
}

This is in my class implementing OnInit:

```typescript
companyDropdown: CompanyDropDownItem[];

selectedCompanyDropdown: CompanyDropDownItem = 
    {
     CompanyAn: 0,
     CompanyName: '',
     CompanyCode: '',
     Inactive:false
    };

这是 edit 表单视图,其中值 CompanyAnCompanyNameCompanyCode 必须按 onChange:

更新
<label for="CompanyName">Company</label>
<p-dropdown #selectedNewEmployee name="CompanyName" [options]="companyDropdown" placeholder="Select Company"  optionLabel="CompanyName" appendTo="body" [virtualScroll]="true" [itemSize]="20" [filter]="true" [showClear]="true" [(ngModel)]="selectedCompanyDropdown (onChange)="getCompanyDetails(selectedCompanyDropdown)"></p-dropdown>

<div>
    <p-button label="Save" icon="pi pi-check" (onClick)="onSaveEmployee(selectedNewEmployee.value)"></p-button>
</div>

这是 getCompanyDetails() - WebEmployeeDetails 是一个更大的界面,值被插入其中:

getCompanyDetails(WebEmployeeDetail: CompanyDropDownItem) {
    
   // PASSING IN ALL THE PROPERTIES FROM THE COMPANY CLASS
   this.selectedEmployee.CompanyAn = WebEmployeeDetail.CompanyAn ;
   this.selectedEmployee.CompanyCode = WebEmployeeDetail.CompanyCode;
   this.selectedEmployee.CompanyName = WebEmployeeDetail.CompanyName;
    
   // CHECKING THE VALUES ARE CHANGING WITH EACH CHANGE IN THE DROPDOWN
   console.log('New CompanyAn is: ',this.selectedEmployee.CompanyAn);
   console.log('New Company Code is: ',this.selectedEmployee.CompanyCode);
   console.log('New Company Name is: ',this.selectedEmployee.CompanyName);
}

最后,这是onSaveEmployee():

onSaveEmployee(WebEmployeeDetail: WebEmployeeDetail): void {
    
    this.div_visible = true; // progress bar start.
        this.EmployeeService.onUpdateEmployee(WebEmployeeDetail)
            .subscribe(
                (data: WebEmployeeDetail) => setTimeout(()=>{ this.div_visible = false }, 1000, console.log(`${WebEmployeeDetail.PeopleId} updated succesfully`, data)),
                (err: any) => console.log(err)
                      )

问题是您可以使用 Chrome 控制台看到图像 link 我正在 CompanyName [=48= 下获取整个 selectedCompanyDropDown 对象].

如何只传递 CompanyName 属性 而不是整个对象?

Chrome Console

如果你只想从对象接收属性,你需要改变optionValue属性,像这样:

<p-dropdown #selectedNewEmployee name="CompanyName" optionValue="CompanyName" [options]="companyDropdown" placeholder="Select Company"  optionLabel="CompanyName" appendTo="body" [virtualScroll]="true" [itemSize]="20" [filter]="true" [showClear]="true" [(ngModel)]="selectedCompanyDropdown (onChange)="getCompanyDetails(selectedCompanyDropdown)"></p-dropdown>