时间戳

首页 > 解决方案 > Angular 10 @Input 引用

angular - Angular 10 @Input 引用

问题描述

我无法从组件属性中获取值更改。在这个简单的示例中，我有一个 ngFor，它创建 TextField 组件的实例，将 fields[i].value 作为属性传递。I 值有一个默认值，它正确打印在输入上，但更改不会反映在原始模型上。

<ng-container *ngFor="let field of fields.all(); let i = index;">
                        <dynamic-text-field

                            [id]        = "field.name"
                            [name]      = "field.name"
                            [label]     = "field.label"
                            [note]      = "field.translate_help"
                            [(val)]     = "fields[i].value"
                        >

                        </dynamic-text-field>
 </ng-container>


export class TextField
{

    @Input() id         : string = "";
    @Input() name       : string = "";
    @Input() note       : string = "";
    @Input() label      : string = "";
    @Input() val        : string = null;

    [...]
}

<mat-label translate> {{ label | translate }} </mat-label>
<input  matInput placeholder="" [(ngModel)]="val" name="{{name}}" />

标签： angular

解决方案

我猜那@Input是因为 an 并不是真正的双向绑定。另外，看起来你fields[i].value是一个原始的（string）。

这可能是一个不理想的解决方法，但您可以尝试传递一个对象val，然后在您的TextField组件中，通过类似[(ngModel)]="val.value". 这样，val它是一个对象，因此它通过对子组件的引用传递 - 对模型的任何更新都将在父组件中可用。

另一种方法可能是将回调函数传递给您在模型更新时调用的子组件 - 例如：

                        <dynamic-text-field

                            [id]        = "field.name"
                            [name]      = "field.name"
                            [label]     = "field.label"
                            [note]      = "field.translate_help"
                            [val]       = "fields[i].value"
                            (valueChange)="onValueChange($event)"
                        >

                        </dynamic-text-field>

和：

<mat-label translate> {{ label | translate }} </mat-label>
<input  matInput placeholder="" [ngModel]="val" (change)="valueChange.emit($event.value)" name="{{name}}" />

和：

export class TextField
{

    @Input() id         : string = "";
    @Input() name       : string = "";
    @Input() note       : string = "";
    @Input() label      : string = "";
    @Input() val        : string = null;
    @Output() valueChange = new EventEmitter<string>();

    [...]
}

然后在父onValueChange方法中触发您需要的任何逻辑

推荐阅读