角度输入视图显示，是否可以快速交换测试输入数据？

Question

如何创建模拟数据以插入并测试显示？每次，我们要查看HTML渲染时，都必须从字面上复制数据并将其粘贴到Typescript文件中。是否有任何工具集可以执行此操作？

当前正在测试以HTML格式显示的@Inputs>

在研究以下选项时，

• 它不是API，因此不能使用“ angular-in-memory-web-api” https://www.techiediaries.com/angular-inmemory-web-api/中的InMemoryDbService
• 也不是数据库，因此无法应用json-server https://medium.com/letsboot/the-perfect-mock-backend-to-start-with-an-angular-application-3d751d16614f

存在哪些选项可以快速交换输入？还是人们必须复制并粘贴到每个文件中，这是Angular的习惯吗？

Typescript

export class CustomerView implements OnInit {

  @Input() customer: Customer;
    this.customer.name = "Joe";
    this.customer.address = "123 Maple STreet";
    this.customer.city = "Atlanta";
    this.customer.state = "GA";
    this.customer.zip= "30314";
    this.customer.phone = "555-444-77777";
HTML

    <div class = "row">
        <div> {{customer.name}} </div>
        <div> {{customer.address}} </div>
        <div> {{customer.city}} </div>
        <div> {{customer.state}} </div>
        <div> {{customer.zip}} </div>
        <div> {{customer.phone}} </div>
    </div>
Display example plcture

如何创建模拟数据以插入并测试显示？每次，我们要查看HTML渲染时，都必须从字面上复制数据并将其粘贴到Typescript文件中。有任何工具集可以执行此操作吗？ ...

Answer 1

您可以使用必填字段创建json文件或对象。

Answer 2

您可以使用JSON占位符的API来获取一些数据。