角材料中的奇数行为

Question

在Stackblitz中打开链接

https://material.angular.io/components/input/examples

将value =“ Sushi”替换为[（ngModel）] =“ Sushi”

UI不变

用我想在类中实现的[（ngModel）] =“ food.Sushi”替换。

UI看起来有所不同。未显示下划线

Answer 1

这不是Angular Material问题，这是一个基本的JavaScript问题。如果您在默认Angular Material输入StackBlitz上尝试[(ngModel)]="food.Sushi"时检查了控制台，则会看到错误：

Error: Cannot read property 'Sushi' of undefined

此错误使输入无法正确呈现。您至少需要在类型为food的组件类any上定义一个属性，其默认值为空对象{}，以便所需的对象子属性{{1}当用户与输入进行交互时，可以由food.Sushi设置}。

组件（元数据来自ngModel StackBlitz示例）：

mat-input

模板（不要忘记@Component({ selector: 'input-overview-example', styleUrls: ['input-overview-example.css'], templateUrl: 'input-overview-example.html', }) export class InputOverviewExample { food: any = {}; } 属性）：

name

这是一个example在起作用。在为类属性<form class="example-form"> <mat-form-field class="example-full-width"> <input matInput placeholder="Favorite food" name="food" [(ngModel)]="food.Sushi"> </mat-form-field> </form> 设置空对象的默认值的情况下，输入已正确呈现，因为已解决了来自控制台的错误。

希望有帮助！