Javascript 在“角度-角度”与“Blazor”方法中，在点击显示场景中使用集合

为了帮助确定开发团队的UI框架方向，我目前正在评估Angular 8和Blazor。该团队目前使用C#，因此倾向于Blazor似乎是自然的。但有人说Blazor仍然有资格成为“Release1”风险，所以为了平衡问题，我也在探索Angular作为替代方案

该用例非常简单，类似于电子邮件用户界面。左侧将显示一个列表，其中包含消息标题和日期，单击其中一个时，单击消息的全文将显示在右侧更大的空间中。这是一个基本的点击显示场景。单击左侧并在右侧显示

我对C#相当了解，因此我能够在Blazor中使用类和foreach循环相对快速地将其组合在一起。使用一个带有属性的简单“Message”类，我可以循环遍历消息并在列表集合中显示每个消息。下面是该代码的一些片段（这是一个早期的POC，因此它仍然有一些粗糙的边缘）：

公共类消息
{
公共字符串主题{get；set；}
公共字符串MessageType{get；set；}
公共字符串MessageText{get；set；}
public DateTime DateCreated{get；set；}
}
@主题


@日期创建


@MessageText

@onClick（）上的“popIt（）”调用一个函数，该函数从List collection返回消息编号，然后根据第二个代码块中传递的编号显示消息属性。这似乎是可行的，但需要一些改进

不知道Angular和C#，虽然我有一些高级基础知识，但我正在经历一场小的斗争，以在该框架中复制该场景的部分内容。我似乎在组件中使用插值和内联单击事件以及onClick（）方法（在component.ts文件中也称为“popIt（）”）设置了基本的单击显示：

在TypeScript中，迭代消息对象的等价物及其属性会带来障碍。我知道TypeScript没有现成的“列表”功能，所以建议创建自己的列表功能吗？或者“地图”可以实现这一点吗？或者将其与ngFor相结合？现在，我在component.ts文件中有硬编码的消息（“Message1”、“Message2”、“Message3”等），因此它们可以正确显示，并且一些单击可以正常工作。但是，如果有一个等价的功能，可以通过一系列具有属性的对象结构进行迭代，那就太好了，这可能与Blazor代码的工作方式类似。我一直在研究一些角度的方法，我还在寻找

其他信息：这两个POC都使用Visual Studio 2019（该团队已经使用Visual Studio多年）。Angular版本使用Angular Visual Studio模板（特别是v8.2.12）

如有任何建议、想法、意见或指示，将不胜感激！如果需要，我还可以发布更多代码。谢谢大家!

我目前正在评估Angular 8和Blazor。但有人说Blazor仍然有资格成为“Release1”风险，所以为了平衡问题，我也在探索Angular作为替代方案

还有一点需要考虑：Blazor是服务器端渲染，Angular是客户端渲染。服务器端可能意味着服务器上的负载增加

也有，但仍在预览中，所以您可能希望避免这种情况

该团队目前使用C#，因此倾向于Blazor似乎是自然的

Typescript是由创建C#的同一个人创建的，并且使用了许多相同的约定。你会惊讶地发现，对于一个C#开发者来说，学习起来是多么容易。开发人员可能会对JavaScript的一些不规则性产生问题，您可以通过选择Blazor来避免这些问题

在TypeScript中，迭代消息对象的等价物及其属性会带来障碍

如果您想在C#中使用

List

的功能，请在Typescript中使用

Array

。JavaScript应该具有用例所需的所有特性。在角度方面，使用

ngFor

进行迭代。例如：

示例.component.ts

接口消息{
主题：字符串；
正文：字符串；
创建日期：日期；
}
...
公共消息：数组；

示例.component.html

{{msg.Subject}}
{{msg.Body}
{{msg.DateCreated}}

如果你有兴趣，我可以准备一个更好的演示

---

您可以使用VisualStudio开发Angular应用程序，但VSCode会更好。它有更多的功能，速度更快。对于Blazor，您需要Visual Studio 2019。

感谢您的回复，这无疑为我指明了一个可能的方向。不幸的是，这个问题已经结束（我在这个网站上的第一个问题），所以我不知道你是否会看到这个评论。如果你有更先进的，这将是伟大的看到，但我真的很感谢你在这方面的帮助！我想我现在已经在Angular和TypeScript中工作了，至少在一个基本的层面上。再次感谢你的帮助@伊沃马克很高兴能帮上忙。

public class Message
{
    public string Subject { get; set; }
    public string MessageType { get; set; }
    public string MessageText { get; set; }
    public DateTime DateCreated { get; set; }
}

<a class="list-group-item list-group-item-action active" 
   data-toggle="list" 
   href="#home"     
   role="tab" 
   @onclick="() => popIt(0)"
>
    <span id="msgSubject1">@Message[0].Subject</span>
    <br />
    <span class="datetimeCls" id="datetime1">@Message[0].DateCreated</span>
</a>

<div id="messageMenuBar">
    <div class="messageTitleSection">
        <span class="theMessage" id="messageTitle">@Subject&nbsp;&nbsp;
        </span>
        &nbsp;&nbsp;
        <br />
        <span id="messageDate">@DateCreated&nbsp;&nbsp;</span>
    </div>
</div>
<br />
<div class="textDiv" id="home">
    <p class="textDisplay">@MessageText</p>
</div>