Question

我正在尝试在我的角度6分量之一的输入字段中设置预定义值。根据一个解决方案，我使用[value]标记设置了值，该标记引用了component.ts中的特定@Input字段。但是，当我设置此值时，它在输入字段中为[object HTMLInputElement]。我在SO上看到了一些问题，这些问题都涉及到普通的javascript解决方案，但我想知道是否可以找到更多有角度的知识

html

<div [formGroup]="group">
  <div *ngIf="predefined !== undefined; else default">
    <input #predefined type="{{ type }}" class="{{ class }}" placeholder="{{ placeholder }}" id="{{ id }}" autocomplete="{{ autoComplete }}" formControlName="{{ formControlName }}" [value]="predefined">
  </div>
  <ng-template #default>
        <input type="{{ type }}" class="{{ class }}" placeholder="{{ placeholder }}" id="{{ id }}" autocomplete="{{ autoComplete }}" formControlName="{{ formControlName }}">
  </ng-template>
</div>

.ts

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

@Component({
  selector: 'app-text-field',
  templateUrl: './text-field.component.html',
  styleUrls: ['./text-field.component.scss'],
  encapsulation: ViewEncapsulation.None
})

/**
* Generic text field component
*/
export class TextFieldComponent implements OnInit {
  /**
  * Properties to be used by the template
  */
  @Input() group: FormGroup;
  @Input() type: string;
  @Input() placeholder: string;
  @Input() class: string;
  @Input() id: string;
  @Input() autoComplete: string;
  @Input() formControlName: string;
  @Input() predefined: string;


  constructor() {}

  ngOnInit() {}

}

设置值的服务

import { Injectable, ComponentFactoryResolver } from '@angular/core';
import { TextFieldComponent } from 'src/app/components/core/text-field/text-field.component';

@Injectable({
  providedIn: 'root'
})
/**
* This service dynamically creates text fields based on the params provided
*/
export class DynamicTextFieldService {

  /**
  * Initializes the ComponentFactoryResolver
  */
  constructor(private resolver: ComponentFactoryResolver) { }

  /**
  * Takes in array and uses the array items to populate the properties of the TextFieldComponent
  * Initializes instance of the text field component
  */
  loadTextField(array) {
    let reference = array.reference;
    const inputFactory = this.resolver.resolveComponentFactory(TextFieldComponent);
    const textField = reference.createComponent(inputFactory);
    textField.instance.group = array.group;
    textField.instance.type = array.type;
    textField.instance.class = array.class;
    textField.instance.placeholder = array.placeholder;
    textField.instance.id = array.id;
    textField.instance.autoComplete = array.autoComplete;
    textField.instance.formControlName = array.formControlName;
    if(array.predefined){ console.log(array.predefined)
      textField.instance.predefined = array.predefined;
    }
  }
}

Answer 1

您绑定到值的predefined使用#predefined（输入中的模板变量）。尝试将#predefined删除/重命名，并将[value]绑定到predefined（ts文件中的那个）

因此更改此：

<input #predefined ... [value]="predefined">

对此：

<input #newPredefined ... [value]="predefined">

Answer 2

<input 
#predefined  <-- Remove this or change the ref name
type="{{ type }}" 
class="{{ class }}" 
placeholder="{{ placeholder }}" 
id="{{ id }}" 
autocomplete="{{ autoComplete }}" 
formControlName="{{ formControlName }}" 
[value]="predefined"
>

您的@Input()名称和Input Reference name (#predefined)是相同的，因此，每当您尝试设置[value]时，它都会被#predefined（它是DOM元素的本地引用）覆盖。

因此请更改本地引用名称。

设置输入值显示[object HTMLInputElement]角度

2 个答案: