blazor - 如何在 Blazor Wasm 加载时显示从 api 获取的报价(即在加载屏幕上)?
问题描述
我想在加载 blazor wasm 应用程序时显示引号。如何访问此 msg 类。我已将脚本放在 index.html 标头标签中。但是不能访问这个?
<script>
fetch("https://localhost:44359/data/Quotes.json")
.then(res => res.json())
.then(data => console.log(data.quotes));
document.querySelector("body").innerHTML = "hey";
</script>
</head>
<body>
<app>
<div class="loading-page">
<div class="quotes">
<div class="msg"></div>
<div class="author"></div>
</div>
<div class="loader mt-5">
<div class="loader-dot dot1"></div>
<div class="loader-dot dot2"></div>
<div class="loader-dot dot3"></div>
</div>
</div>
</app>
<script src="_framework/blazor.webassembly.js"></script>
<script>
navigator.serviceWorker.register("service-worker.js");
</script>
</body>
有什么办法吗???
解决方案
你应该这样做:
<body>
<app><div id="message"></div></app>
<div id="blazor-error-ui">
An unhandled error has occurred.
<a href="" class="reload">Reload</a>
<a class="dismiss"></a>
</div>
<script src="_framework/blazor.webassembly.js"></script>
<script>
(function () {
var quote = document.getElementById("message");
fetch("sample-data/quotes.json")
.then(res => res.json())
.then(data => quote.innerHTML = data[1].msg + "<br /><br />" + data[1].author);
})();
</script>
</body>
在 wwwroot 文件夹中创建一个名为 sample-data 的文件夹,并在其中创建一个包含以下数据的 json 文件:
引号.json
[
{
"msg": "It is a far, far better thing that I do, than I have ever done; it is a far, far better rest I go to than I have ever known.",
"author": "Charles Dickens"
},
{
"msg": "All we have to decide is what to do with the time that is given us.",
"author": "J.R.R. Tolkein"
},
{
"msg": "It matters not what someone is born, but what they grow to be.",
"author": "J.K. Rowling"
}
]
注意:您可以在应用程序元素中插入您想要的任何标记,包括图像、文本滑块等,并进行任何您喜欢的操作......然而,重要的是您的所有代码都应该在即时函数中,在相同的位置,它被放置在样品中。
推荐阅读
- php - 如何在php中引用第二次出现的字符串?
- java - 如何使用短格式在终端中运行 java 程序?
- python - 如何只从字典中获取值?
- objective-c - 如何以编程方式禁用 Spotlight 搜索的快捷方式?
- javascript - 优化 Svelte 中的渲染 - 添加数万个 DOM 元素
- r - Rcpp (Eigen),重复或重复行
- flutter - 带有动态高度项的 ListView 的抽动滚动指示器
- push-notification - HMS 取消通知,标签不起作用((HMS 推送工具包)
- xamarin - 如何处理链接打开新选项卡的 Xamarin Webview?
- flutter - 从多个类访问构建上下文以在 Flutter 中进行应用本地化的最佳实践?