问题描述
我正在开发Angular应用程序，并且想在/ shopping部分使用Google的可编程搜索引擎。
我已经在我的index.html文件中包含了脚本标签。以下是shopping-list.compononent.ts
/shopping的html
<div class="jumbotron">
<div class="container-fluid">
<h1 class="display-4"><span><img src="assets/undraw_empty_cart.svg" alt="Card thumbnail" style="width: 1.5em; height: auto;"></span>Your cart</h1>
<p class="lead">Manage the ingredients that you want to buy here</p>
<br/>
<div class=" col-lg-8 list-group list-group-flush">
<app-shopping-item *ngFor="let shoppingItem of shoppingCartRecipes" [shoppingItem]="shoppingItem"></app-shopping-item>
</div>
<div class="col-lg-4 gcse-search"></div>
</div>
</div>
这是index.html
<!doctype html>
<html lang="en">
<head>
<Meta charset="utf-8">
<title>ShoppingApp</title>
<base href="/">
<Meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@300;400;700&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/96250b37a0.js" crossorigin="anonymous"></script>
<script async src="https://cse.google.com/cse.js?cx=dc5cfbd31541cbb99"></script>
</head>
<body>
<app-root></app-root>
</body>
</html>
由于某种原因，搜索框没有显示。在inspect元素上，div仍然存在，但未显示，并且其属性未更改为display: none;
这是怎么回事？将Google搜索嵌入到Angular项目中的一种好方法是什么？ 谢谢。
解决方法
尝试以下解决方案：
-
尝试从类集中删除
col-lg-4。 -
在类周围添加一个包装 div。