Angular Material Select - 如何以编程方式设置值？

Question

我有一个带有 select 输入作为组件的表单 - 因此表单组件包含每个字段类型（文本、select、textarea 等）的子组件。我希望能够加载数据并将其显示在表单中。问题出在 material-select，我无法设置值，我读过有关使用 [compareWith] 指令的信息 - 但我不知道如何触发它。为了模拟将数据发送到我创建了一个按钮，该按钮更改 Select 组件中的 @Input 值，并由此触发 [compareWith] - 但我想这不是解决方案。

这里是主要的组件结构：

 <form [formGroup]="contactForm" >
    <mat-form-field class="example-full-width" appearance="fill">
      <mat-label>Full Name </mat-label>
      <input matInput placeholder="Full Name" value="" formControlName="fullName">
    </mat-form-field>
  <br>
    <mat-form-field class="example-full-width" appearance="fill">
      <mat-label>Email </mat-label>
      <input type = "email" matInput placeholder="Email" value="" formControlName="email">
    </mat-form-field>
    <br>
    // select component *
    <select-multiple-example [formObj]="contactForm" [selectedValue]="selectedVal">
    </select-multiple-example>
  </form>
  
<button mat-raised-button color="primary" (click)="setSelectValue()">set value</button>

为了更好地理解问题，我添加了 2 个示例：

首先是我尝试触发 select-multiple-example 并从它的输入中设置一个值
第二个是将值广告设置为独立组件的工作示例

Example of the problem

Example of the selection working as an independent component

Answer 1

如果我没有正确理解你的问题，你想查看 ngOnChanges() 生命周期函数（onInit、onDestroy、onChange 等...）。通过这种方式，您将能够看到父组件中的更改并对其做出反应。如果我理解您的问题，请告诉我！

Answer 2

哦，好的，基本上你想在 parent 上的输入值发生变化时触发 child 组件上的事件。

首先，您应该从 parent 获取 child 组件的引用，以便在代码中使用 ViewChild(ren) 访问它，然后如果您单击按钮，您应该触发更改 child 组件内的值的事件或函数。

但是，这也可以通过您使用 ngOnChanges 提供的示例来实现。

这里的第一个问题是您试图访问 constructor 中的输入值。你不能那样做。 constructors 是打字稿，@Input 是 Angular。您的输入变量将在 ngOnInit.

可用

因此，将 formObj 分配移动到 ngOnInit

  ngOnInit() {
    this.myprgrmFormControl = this.formObj
  }

然后，您可以访问 ngOnChanges

中更改的变量

  ngOnChanges(changes: SimpleChanges) {
    this.myprgrmFormControl.get('program').setValue([changes.selectedValue.currentValue])
  }

Angular Material Select - 如何以编程方式设置值？

Angular Material Select - How to set value programatically?

angular-material

angular