如何显示多选原件angular2的对象值

在Angular 2中，可以使用多选原件来显示对象值。以下是一个示例：

首先，确保你已经安装了Angular CLI，并创建了一个新的Angular项目。
在你的组件的HTML模板中，使用Angular的表单模块来创建一个多选原件。例如：

<form [formGroup]="myForm">
  <label for="myOptions">选择对象值：</label>
  <select id="myOptions" formControlName="selectedOptions" multiple>
    <option *ngFor="let option of options" [value]="option">{{ option.name }}</option>
  </select>
</form>

在上面的示例中，我们使用了一个select元素，并将其设置为多选模式（multiple）。使用*ngFor指令来循环遍历options数组，并为每个选项创建一个option元素。我们将每个选项的值设置为option对象本身，并在选项的标签中显示option.name属性。

在你的组件的TypeScript代码中，创建一个表单组并初始化选项数组。例如：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent implements OnInit {
  myForm: FormGroup;
  options: any[] = [
    { id: 1, name: '选项1' },
    { id: 2, name: '选项2' },
    { id: 3, name: '选项3' }
  ];

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.myForm = this.formBuilder.group({
      selectedOptions: []
    });
  }
}

在上面的示例中，我们使用FormBuilder来创建一个表单组，并将其赋值给myForm属性。我们还定义了一个options数组，其中包含要显示的选项对象。

最后，在你的组件的HTML模板中，将表单组与多选原件绑定。例如：

<form [formGroup]="myForm">
  <label for="myOptions">选择对象值：</label>
  <select id="myOptions" formControlName="selectedOptions" multiple>
    <option *ngFor="let option of options" [value]="option">{{ option.name }}</option>
  </select>
</form>

<p>选择的对象值：</p>
<ul>
  <li *ngFor="let selectedOption of myForm.get('selectedOptions').value">{{ selectedOption.name }}</li>
</ul>

在上面的示例中，我们使用formControlName指令将多选原件与表单组中的selectedOptions控件进行绑定。我们还使用myForm.get('selectedOptions').value来获取选中的对象值，并使用*ngFor指令循环遍历并显示在一个无序列表中。

这样，当用户选择多个选项时，你就可以显示选中的对象值了。

腾讯云相关产品和产品介绍链接地址：