Angular 角材料中的奇异行为

在Stackblitz中打开链接

将value=Sushi替换为[ngModel]=Sushi

用户界面没有变化

替换为[ngModel]=food.Sushi，其中我要用类实现

UI看起来不一样。下划线没有出现

---

这不是一个角度材料问题，这是一个基本的JavaScript问题。如果在默认角度材质输入StackBlitz上尝试[ngModel]=food.Sushi时检查控制台，您会看到错误：

Error: Cannot read property 'Sushi' of undefined

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

组件元数据来自mat input StackBlitz示例：

@Component({
  selector: 'input-overview-example',
  styleUrls: ['input-overview-example.css'],
  templateUrl: 'input-overview-example.html',
})
export class InputOverviewExample {
  food: any = {};
}

模板不要忘记名称属性：

<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>

这是一个正在实施的计划。如果为类属性food设置了空对象的默认值，则输入将正确呈现，因为来自控制台的错误已得到解决

希望这有帮助