如何通过Angular2展示MVC控制器返回的数据

我明白你的需求了——不想让Angular直接发HTTP请求，而是通过MVC控制器去调用WebAPI拿数据，再把数据给到Angular视图渲染对吧？下面分步骤给你具体实现方案：

1. 完善MVC控制器，传递WebAPI数据到视图 #

首先确保你的MVC控制器已经成功调用WebAPI拿到了List<UsersVM>数据，接下来要把这个数据传递给视图。这里推荐把数据序列化为JSON字符串，通过ViewBag传递，让Angular能读取到：

public ActionResult UserList()
{
    // 你已有的调用WebAPI并反序列化的代码
    var response = // 这里是你调用WebAPI获取的响应内容
    List<UsersVM> UserInfo = JsonConvert.DeserializeObject<List<UsersVM>>(response);

    // 把数据序列化为JSON字符串，传给视图
    ViewBag.UserData = JsonConvert.SerializeObject(UserInfo);
    return View();
}

2. 在MVC视图中注入数据到Angular可访问的环境 #

在你的MVC视图（比如UserList.cshtml）里，把ViewBag里的JSON数据赋值给全局变量，或者直接作为Angular组件的输入属性传递：

方式一：全局变量注入 #

<!-- 在Angular根组件加载前定义全局变量 -->
<script>
    window.userDataFromMvc = @Html.Raw(ViewBag.UserData);
</script>

<!-- 你的Angular根组件挂载点 -->
<app-user-list></app-user-list>

方式二：通过组件输入属性传递 #

如果你的Angular组件直接在MVC视图里渲染，可以直接把数据作为输入传入：

<app-user-list [userData]="@Html.Raw(ViewBag.UserData)"></app-user-list>

3. 调整Angular组件，读取并处理数据 #

根据你选择的注入方式，在Angular组件里获取数据：

方式一：读取全局变量 #

import { Component, OnInit } from '@angular/core';
import { IUser } from './your-user-interface-path';

declare var userDataFromMvc: IUser[]; // 声明全局变量类型

@Component({
  selector: 'app-user-list',
  templateUrl: './user-list.component.html'
})
export class UserListComponent implements OnInit {
  users: IUser[] = [];

  ngOnInit(): void {
    // 从全局变量获取数据
    this.users = userDataFromMvc;
  }
}

方式二：通过输入属性接收 #

import { Component, Input, OnInit } from '@angular/core';
import { IUser } from './your-user-interface-path';

@Component({
  selector: 'app-user-list',
  templateUrl: './user-list.component.html'
})
export class UserListComponent implements OnInit {
  @Input() userData: IUser[] = [];
  users: IUser[] = [];

  ngOnInit(): void {
    this.users = this.userData;
  }
}

4. 在Angular模板中遍历渲染数据 #

最后在Angular组件的模板（user-list.component.html）里用*ngFor遍历数据即可：

<div *ngFor="let user of users" class="user-item">
  <p>姓名: {{user.name}}</p>
  <p>邮箱: {{user.email}}</p>
  <!-- 这里根据你的IUser接口的字段来渲染对应内容 -->
</div>

注意事项 #

• 确保你的IUser接口和后端的UsersVM模型字段完全匹配，避免序列化/反序列化出现字段不对应的问题
• 使用@Html.Raw()是为了防止MVC自动转义JSON字符串，保证Angular能正确解析
• 如果数据量很大，全局变量方式可能会有性能问题，一般场景下完全够用，若需优化可考虑其他传递方式

内容的提问来源于stack exchange，提问作者krunal patel