Question

我有一个父组件，其中我们有一个带有10个选项的ng-select组件，我从父组件传递给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;

在parent 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 将被传递给 app-select 组件作为 input 。更改后，您的父组件如下。

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>

找到Forked StackBlitz。

绑定到ng-select的条件选项

2 个答案: