将Razor模型传入Angular 5组件时控制台输出undefined的问题

我来帮你搞定这个问题！你遇到的控制台输出undefined的情况，主要是因为数据传递的方式出了几个小问题，咱们一步步来修正：

先分析你代码里的核心问题 #

1. 错误使用双向绑定语法：你用了[(myModel)]双向绑定，但你的Angular组件只定义了@Input()，没有对应的@Output()（比如myModelChange事件）。双向绑定需要输入输出成对配合，而这里你只需要从Razor向Angular单向传数据，完全没必要用双向绑定。
2. 没有正确序列化C# Model为JSON：你把@Model用单引号包裹，这会把它当成普通字符串传递，而IEnumerable<MyClass>直接转字符串只会输出类型名称（比如System.Collections.Generic.List1[MyClass]`），根本不是Angular能识别的有效数据。

步骤1：修正Razor视图的代码 #

把组件调用部分改成这样，确保数据正确序列化并单向传递：

@model IEnumerable<MyClass>
@using System.Text.Json

<app-root [myModel]="@JsonSerializer.Serialize(Model)"></app-root>

• 用JsonSerializer.Serialize(Model)把C#的Model序列化成合法的JSON字符串，Angular才能解析成对象数组。
• 用单向绑定[myModel]传递数据，符合你当前的单向传值需求。

如果是ASP.NET Framework（不是Core），需要换用旧的序列化方式：

@model IEnumerable<MyClass>
@using System.Web.Script.Serialization

<app-root [myModel]="@Html.Raw(new JavaScriptSerializer().Serialize(Model))"></app-root>

步骤2：优化Angular组件的接收逻辑 #

你的组件代码可以保留大部分，但可以做些优化确保能正确捕获数据：

import { Component, Input, OnInit, OnChanges, SimpleChanges } from '@angular/core';

// 建议定义对应C# MyClass的TypeScript接口，提升类型安全性
interface MyClass {
  // 这里对应你的C#类属性，比如：
  id: number;
  name: string;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styles: []
})
export class AppComponent implements OnInit, OnChanges {
  title = 'app';
  @Input() public myModel: MyClass[] | undefined;

  ngOnInit() {
    console.log('初始化时的myModel:', this.myModel);
  }

  ngOnChanges(changes: SimpleChanges) {
    // 监听输入属性变化，避免Razor渲染时机晚于Angular初始化的情况
    if (changes['myModel']) {
      console.log('数据更新后的myModel:', this.myModel);
    }
  }
}

• 定义TypeScript接口可以避免any类型的模糊性，让代码更严谨。
• 加入ngOnChanges是因为有时候Razor渲染数据的时机可能晚于Angular的ngOnInit，用它能确保数据加载完成时被捕获。

额外注意事项 #

• 确保你的C# MyClass类的属性都是public的，否则序列化工具无法读取这些属性。
• 如果你的Model数据量很大，可以考虑异步加载，但当前场景下同步序列化完全够用。

这样修改之后，你的Angular组件应该就能正确接收到从Razor传递过来的Model数据，控制台也不会再输出undefined了。

内容的提问来源于stack exchange，提问作者onedevteam.com