绑定到ng-select的条件选项

Question

我有一个父组件，我们有一个ng-select组件，其中有10个选项，我将它们从父组件传递给ng-select。 我也有一个复选框。

我的目标是在选中复选框时仅传递1个选项。 当我选择了选择框时，是否有可能重复默认选择框的行为？我单击复选框，它会根据我的if条件自动选择唯一的选项。

这是例子。 https://stackblitz.com/edit/angular-8wvjvx?file=src%2Fapp%2Fapp.component.html

预期结果：当我单击ng-select复选框时，将根据我的if条件更改值；

实际结果：没有。 因此我有一个错误的值

Answer 1

使用ViewChild

例如

将此导入添加到您的父组件中：

import { ViewChild } from '@angular/core';
import { HelloComponent } from './hello.component'

在父component.ts中：

@ViewChild('helloComponent') myHelloComponent: HelloComponent;

在父component.html中：

<app-select #helloComponent [options]="options" ></app-select>

然后，您可以从父级访问子级组件的属性。

例如，您可以在子组件中声明一个名为selectedValue的变量，该变量将告诉您的选择必须选择（或已由用户输入选择的）值。

希望能帮助到你。

Answer 2

您只需要做一些更改即可实现所需的功能。

将ngModel和ngValue属性设置为父组件中的select 。

<select [(ngModel)]="checkedOption">

  <option *ngFor="let item of options" [ngValue]="item"> {{item.name}} </option>

</select>

在父组件内定义checkedOption和items变量。 在这里， checkedOption将捕获父组件中的选定选项，并且items将作为input传递到app-select组件。 完成更改后，您的父组件如下。

export class AppComponent  {

  options: any;
  checkedOption: any;
  itemes: any;
  ...

  constructor () {
     this.options = this.defaultOptions;
     this.checkedOption = this.options[0];
     this.itemes = [this.checkedOption];
  }

  isChecked(isChecked) {

    this.itemes = isChecked ? [this.checkedOption] : this.options;
  }
}

将items传递到app-select组件，如下所示。

<app-select [options]="itemes" ></app-select>

查找派生StackBlitz 。