如何在Angular中只关闭一张Bootstrap Card？

在Angular中关闭一张Bootstrap Card有多种方法，以下是其中的一种：

首先，在组件的HTML模板中，为卡片添加一个关闭按钮，并绑定一个点击事件：

<div class="card">
  <div class="card-header">
    Card Header
    <button class="close" (click)="closeCard()">&times;</button>
  </div>
  <div class="card-body">
    Card Content
  </div>
</div>

接下来，在组件的对应TypeScript文件中，实现关闭卡片的逻辑：

export class MyComponent {
  cardVisible: boolean = true;

  closeCard() {
    this.cardVisible = false;
  }
}

通过在组件的模板中使用*ngIf指令来控制卡片的显示与隐藏：

<div *ngIf="cardVisible" class="card">
  <div class="card-header">
    Card Header
    <button class="close" (click)="closeCard()">&times;</button>
  </div>
  <div class="card-body">
    Card Content
  </div>
</div>

这样，当点击关闭按钮时，closeCard()方法会将cardVisible属性设置为false，从而导致卡片被隐藏。

这种方法适用于只关闭单个卡片的场景，可以根据实际需求对其他卡片进行类似的操作。

推荐的腾讯云相关产品：腾讯云服务器（CVM）、云数据库 MySQL（CDB）、云存储（COS）、云函数（SCF）。你可以通过访问腾讯云官方网站（https://cloud.tencent.com/）了解更多产品信息和详细介绍。

如何在Angular中只关闭一张Bootstrap Card？

我使用*ngFor实现了一个卡(bootstrap 4) 我有两个按钮“更多”和“更少”为每张卡，问题来了当我点击“或多或少”它折叠或打开所有的卡，我怎么能指定关闭或打开只有一张卡或只被点击的卡...

浏览 18提问于2019-03-14得票数 0

回答已采纳

2回答

像bootstrap一样在Flutter中构建布局

、、

如何在Flutter中构建响应式布局，如bootstrap或angular flex布局？Angular Flex布局：

浏览 3提问于2019-07-05得票数 2

1回答

在AngularJS中使用指令的LocalStorage

、、、、

我使用ngStorage ()在浏览器的localStorage中存储一些数据。我有这个标记 <li ng-repeat="card in cards"> </li>使用" card“(如您所见)指令，它存储了我的每张卡的模板。

浏览 1提问于2013-10-14得票数 0

3回答

无法将div引导/角对中

、、、、

我想让我的申请变得更漂亮多亏了Bootstrap，我找到了一个用做这件事的方法下面是我将引导带嵌入到我的角度项目中的方式：然后，我将angular.jsonangular.json添加到样式中。

浏览 1提问于2018-07-13得票数 1

1回答

如何在React中的重复元素之间共享数据？

现在一切都可以用，我可以点击一张卡片来扩展它，然后再点击它来折叠它。每一张卡都有自己的状态变量“展开”。'Expanded Card' : 'Normal Card'} </Card>} var CardList = React.createClassindex].week}></ExpandableListItem

浏览 3提问于2015-07-01得票数 0

回答已采纳

1回答

如何在自定义角度库中使用像工具提示这样的Bootstrap组件

、

我想使用自定义角度库中的Bootstrap库组件，如工具提示。我阅读了Bootstrap工具提示的文档，它要求对angular.json文件进行以下更改 "styles": [ "node_modules/bootstrap/dist/css/bootstrap.min.css" "scr

浏览 5提问于2020-06-16得票数 0

1回答

卡片灵感布局使用哪些元素？

、

因此，在我的模型中，我使用卡片，因为它们似乎是最接近我想要创造的东西。现在实现布局，似乎卡片实际上不是我应该使用的。 <div class="card"> </div> <div clas

浏览 1提问于2017-11-16得票数 0

回答已采纳

1回答

我已经尝试过这段代码，这对我来说是有效的，但问题是当我在Angular中使用这段代码时，代码在jquery中得到了错误“折叠标签在jquery中找不到”.why发生了这种情况，有人能帮我解决这个问题吗？('.collapse').collapse('hide');<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap&

浏览 1提问于2020-08-30得票数 0

0回答

在Angular 2/ Bootstrap中自动卷起卡片

、、

我刚刚开始使用Angular 2和Bootstrap 4。我使用Bootstrap中的card类创建了关于页面。当你点击卡片时，它会向下滚动，当你再次点击时，它会向上滚动。我想实现代码，所以当我点击下一个时，前一张卡自动卷起，所以我总是有一张卡打开。以下是HTML文件的一部分： <div class="card-hea

浏览 0提问于2017-06-20得票数 0

2回答

在bootstrap模式被解除后，尝试在角度控制器内触发函数

、、、

我基本上是想弄清楚如何在一个角度控制器中做一个特定的事件侦听器。更具体地说，当一个bootstrap模式被关闭时，我想在angular控制器中触发一个函数。在jquery中，你通常可以这样做： // do something我有一个侧边导航栏，里面有图片作为按钮根据bootstrap文档，我应该能够在'hid

浏览 2提问于2017-04-04得票数 0

1回答

将可选的<md-card>放入组件中

、

我想用Angular 2材料做一张可选的md-card。我已经制作了一个在卡片中包含大量内容的组件，我希望能够通过传递给该组件的布尔值来打开和关闭卡片样式。因为md-card指令不支持这一点，所以我尝试通过执行[class.mat-card]="myBool"直接使用底层CSS类。只有在页面上存在<md-card>之前才有效，否则mat-card样式将不会被注入到DOM中…… 我可以通过复制我的内容来实

浏览 1提问于2017-05-04得票数 0

1回答

Angular中的Bootstrap模式关闭事件

、、、

如何在Angular 7中处理bootstrap模式我在Bootstrap Modal中有表单，我想在模式关闭事件上重置(当在模式之外单击时)，我在Google上搜索，但没有找到任何东西任何帮助都将不胜感激

浏览 10提问于2019-08-25得票数 0

2回答

关闭AngularJS中所有打开的引导模式？

、、

我想用第二个模式作为确认框来关闭第一个模式。当我点击确认框(第二个模态)上的确定时，我无法让它关闭两个调制解调器。tournament-tree.html'"></div><div class="modal-footer"> </script> angular.module('tournamentTree'

浏览 3提问于2014-11-07得票数 7

回答已采纳

3回答

下一次和前一次使用jquery

、、

<div class="card mt-2" id="card-b"> ...mt-2" id="card-d">$(document).ready(function($) { $('

浏览 4提问于2021-08-29得票数 0

回答已采纳

2回答

角材料简单卡标题不正确的尺寸在铬。

、、、

</p> </md-card> <script type="text/javascript"> * You']);</body>

浏览 3提问于2016-01-27得票数 3

2回答

React-在单个卡片中呈现两个不同的数据数组

、

我已经将卡片图像和数据提取到一个对象中。但我不会渲染图像和数据对象。} from 'react-bootstrap';import {Container} from 'react-bootstrap'; </Card.Body> &

浏览 40提问于2021-04-03得票数 2

1回答

在适当对齐的div内的角度材料卡必须具有相同的高度。

、、

我的问题是，我想以某种方式将卡片的高度设置为相等，因此，无论一张卡片的文本长度是多少，其他文本较少的卡片的长度都会与最大的卡片的高度相同。我在重复的div中嵌套md-card，因为我设置了div的填充，然后md-card和它们之间的空间是分开的，就像我想要的那样，但不是等高的。/angular_material/1.1.0/angular-material.min.css"> .category-<em

浏览 2提问于2016-10-20得票数 0

回答已采纳

1回答

在不同条件的相同组件的不同卡片中显示相同的按钮

、、

我是angular的新手，需要一些帮助。我有这个按钮，它只出现在一张卡片上。但是，我想在4张不同的卡片中展示它，这些卡片都有不同的条件。在同一组件的不同卡中显示按钮的最佳方式是什么？<mat-card [disabled]="newUser" <mat-icon>delete</mat-icon> DELET

浏览 12提问于2020-09-02得票数 0

1回答

仅在用户使用angular、typescript确认时切换开关

、、、

当我关闭它并基于变量时，将显示一个弹出模式，要求确认关闭。如果用户单击关闭按钮，则只有在此时切换才会关闭。如果用户在模式中单击cancel按钮，则切换不应该关闭，它应该只处于打开状态。所以请用angular，typescript，bootstrap给出解决方案。我是angular的新手。因此，如果你能解释一下解决方案，那就更容易理解了。提前谢谢。

浏览 10提问于2020-08-27得票数 0

2回答