将对象作为选择角度中的参数传递

发布于 2025-01-11 09:12:47 字数 1595 浏览 0 评论 0原文

我试图在选择中使用 Angular 9.0.7 将对象作为参数传递。

代码如下:

<div *ngIf="foundAddresses == true">
    <label class="bold">Select Address</label>
    <select [ngClass]="{'error-message' : orderForm.controls['address'].touched && orderForm.controls['address'].hasError('required')}" (change)="updateAddress($event.target.value)" formControlName="address" class="titlewidth bottomspacing findAddressSelect">
        <option>Please select</option>
        <option *ngFor="let address of addresses" value="{{address}}">
            {{address.summaryline}}
        </option>
    </select>
</div>

地址是一个对象数组,其中地址是包含不同键值对的对象。数组中对象条目的示例如下所示:

    {
        "addressline1": "1 Heol Dolwen",
        "summaryline": "1 Heol Dolwen, Cardiff, South Glamorgan, CF14 1RX",
        "number": "1",
        "premise": "1",
        "street": "Heol Dolwen",
        "posttown": "Cardiff",
        "county": "South Glamorgan",
        "postcode": "CF14 1RX",
        "recodes": "CF4 1RX:1A:199812"
    },

我试图获取如下值:

  updateAddress(address){
    
    this.addressSelected = true;
    this.selectedAddress = address;

    console.log(this.selectedAddress);
  }

当我打印传递过来的值时,控制台日志显示 [object Object]。我在人们使用 ngModel 的地方发现了一些相互矛盾的答案,但是,我注意到这种方法已被弃用。

该表单是使用以下方法创建的:

<form [formGroup]="orderForm" (ngSubmit)="onSubmit()" novalidate>

我使用 formGroup 作为变量类型,并使用 formBuilder.group 将验证器添加到每个字段。

我应该更改什么才能将其传递到我的控制器 (.ts) 文件?

I am trying to pass an object as parameter using Angular 9.0.7 in a select.

Code looks like this:

<div *ngIf="foundAddresses == true">
    <label class="bold">Select Address</label>
    <select [ngClass]="{'error-message' : orderForm.controls['address'].touched && orderForm.controls['address'].hasError('required')}" (change)="updateAddress($event.target.value)" formControlName="address" class="titlewidth bottomspacing findAddressSelect">
        <option>Please select</option>
        <option *ngFor="let address of addresses" value="{{address}}">
            {{address.summaryline}}
        </option>
    </select>
</div>

The addresses is an array of objects, where address is an object containing different key-value pairs. An example of an object entry in the array looks like this:

    {
        "addressline1": "1 Heol Dolwen",
        "summaryline": "1 Heol Dolwen, Cardiff, South Glamorgan, CF14 1RX",
        "number": "1",
        "premise": "1",
        "street": "Heol Dolwen",
        "posttown": "Cardiff",
        "county": "South Glamorgan",
        "postcode": "CF14 1RX",
        "recodes": "CF4 1RX:1A:199812"
    },

And I am trying to get the value like this:

  updateAddress(address){
    
    this.addressSelected = true;
    this.selectedAddress = address;

    console.log(this.selectedAddress);
  }

When I am printing the value that gets passed over, the console log shows [object Object]. I have found some conflicting answers where people were using ngModel, however, I have noticed this method is deprecated.

The form has been created using this:

<form [formGroup]="orderForm" (ngSubmit)="onSubmit()" novalidate>

I have used formGroup as the variable type and formBuilder.group to add Validators to each field.

What should I change to be able to pass it over to my controller (.ts) file?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

巨坚强 2025-01-18 09:12:47

只是为了确认一下,您想在更改时将整个地址对象传递给 updateAddress 方法吗?

或者,如果您只想要 address.summaryline 那么下面应该可以正常工作
`

<option *ngFor="let address of addresses" value="{{address.summaryline}}">
            {{address.summaryline}}
        </option>

`

Just to confirm, you want to pass the entire address object to the updateAddress method on change?

Or if you just want the address.summaryline then below should work fine
`

<option *ngFor="let address of addresses" value="{{address.summaryline}}">
            {{address.summaryline}}
        </option>

`

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文