- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
这是任务:
您的任务是创建一个名为 TestComponent 的简单 Angular 组件,该组件由选择器 test-component 标识
该组件必须具有名为 inputData 的数组类型的输入属性。
如果没有输入数据(空或丢失),您必须在 id="noData"的 div 中写入“无数据”。如果输入
给定此 div 不得出现在页面的 DOM 中。
如果给定了输入,则必须将输入数组的元素写入单独的 div。 div 必须是
id="dataList"的 div 的子级。如果任何给定字符串的长度为奇数,则文本颜色应为红色。
如果它是均匀的,颜色应该是绿色的。
这就是我所做的:
import { Component, NgModule, EventEmitter, Output, Input } from '@angular/core';
@Component({
selector: 'app-test-component',
template: `
<test-component>
<div id="noData" *ngIf=!'inputData'>No data</div>
<div id="dataList"></div>
</test-component>
<test-component>
<div id="dataList" *ngIf='inputData'>
<div *ngFor="let item of inputData; odd as isOdd; even as isEven;[ngClass]="{even: isEven, odd: isOdd}">
<div>{{item}}</div>
</div>
</div>
</test-component>
`,
style: '.even {
background-color: read;
color: white;
}
.odd {
background-color: gren;
color: white;
}'
})
export class TestComponent{
@Input() inputData: Array<string>;
}
我的怀疑是尊重!在 ngIf 上,从 Dom 中取出元素和奇数,偶数。这些是我还没有的部分。你能给我一些更正吗?
最佳答案
您的 bang
/!
是在错误的地方。它应该在引号内。
<div id="noData" *ngIf="!inputData!>No data</div>
isOdd 或 isEven 的来源是什么?这是输入字段还是您需要计算它?你可以做一些像...
<div *ngFor="let item of inputData; index as index;" [ngClass]="{even: index % 2 === 0, odd: index % 2 !== 0}">
关于棱 Angular 分明!和奇偶,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68443262/
我在移动设备上遇到 mat-dilog 问题。在横向的移动设备上,mat-dialog-actions 按钮位于屏幕之外,因此无法关闭对话框。 我想过使用特殊的 css 类在对话框顶部复制操作按钮,但
这是任务: 您的任务是创建一个名为 TestComponent 的简单 Angular 组件,该组件由选择器 test-component 标识 该组件必须具有名为 inputData 的数组类型的输
如何使用 Angular Slick 创建外部箭头?文档并没有真正提供线索。 我已经知道如何用 jQuery 做到这一点,但这并不完全相同,因为 slick 在 Angular 中使用了一个实际的标签
我正在使用 Angular Material dialog在我的应用程序中显示警告消息。 我需要检查一个对话框是否已经像这样打开: private _openDialog() { // if (t
有没有办法使用棱 Angular Material 制作可折叠卡片?似乎是相当受欢迎的东西,但我一直在这里寻找合适的 Angular Material 组件/设置:Angular Material -
所以我已经为我的系统安装了 angular、angular-material、angular-aria、angular-animate 依赖项。我只是想测试一下这个即将到来的造型方法。看来我一开始就卡
我一直在四处寻找 Angular cookie,但一直没能找到如何在 Angular 中实现 cookie 管理。有没有什么方法可以管理 cookie(比如 AngularJS 中的 $ cookie
我将 HMR ( stories configure hmr ) 添加到我的 Angular 项目中,但不是热重载,而是将其完全重载。 更新到angular 8,问题没有解决。 [HMR] Canno
到处都说 markForCheck 只是将当前组件 View 和所有父组件(直到根组件)标记为脏。所以下次 DetectChanges 执行时它会更新 View 。 从这一点上我有两个问题。两者都在组
我正在尝试获取列表中已更改元素的值,但是当检查的属性正确时,我总是得到未定义的值。 HTML {{ label }}
我们在标记中使用“data-test”属性来查询测试中的元素。例如: 我们不希望此属性出现在生产版本中。到目前为止,我找到了一种解决方法来创建一个指令,该指令在运行时删除生产构建的属性。它肯定会花费
有人可以帮我解决问题吗?nf n 我有一组显示在表格中的对象,并且我进行了搜索。每个对象都是表中的一行。主要问题是数组。我们可以随时修改它(可以添加新行、删除现有行和更改表中的值),即使我们搜索某些内
我正在使用 ng-repeat 创建一个带有日程表 block 的表,但有些表的高度小于 tr,我需要它们都具有相同的高度。在每个 td 中,我都有一个修改过的 md-checkbox: Missin
我有一个用棱 Angular Material 制作的导航组件 //COMPONENT TS FILE import { Component } from '@angular/core'; impor
有没有办法将配置对象传递到定义为属性指令的自定义指令中? 我在 Controller 中有一个对象,我想发送给指令: $scope.configObject = { count: 5,
如何使按钮/图标/复选框像 Material 1 中那样右对齐: https://material.angularjs.org/latest/demo/list 我目前( Material 2)有:
我在我的组件 ts 文件中导入了 OpenLayers map ,然后我创建了一个 id = map 的 div block ,其中必须显示 OpenLayers map ,但它没有。当我将 div
我是一名优秀的程序员,十分优秀!