0

我想在加载 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>

有什么办法吗？？？

4

1 回答 1

1

你应该这样做：

<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"

  }
]

注意：您可以在应用程序元素中插入您想要的任何标记，包括图像、文本滑块等，并进行任何您喜欢的操作......然而，重要的是您的所有代码都应该在即时函数中，在相同的位置，它被放置在样品中。

于 2020-07-17T23:28:08.930 回答