components 相关问题

统一建模语言中的一个组件“代表系统的模块化部分，它封装了其内容，其表现形式可在其环境中替换。组件根据提供的和所需的接口定义其行为”。组件的最佳示例可以在ActionScript-Flash，Flex sdks中找到。你有UI组件，如按钮，标签，DataGrids，可重复使用的图表，可分发等。

禁用角度分量中的先前日期

html：发行日期 html: <div class="col-sm-6 col-md-3 form-group"> <div class="label-mini"> <span>Issue Date</span> </div> <nz-date-picker nzSize="large" nzPlaceHolder="Choose a date" formControlName="issue_date"> </nz-date-picker> </div> <div class="col-sm-6 col-md-3 form-group"> <div class="label-mini"> <span>Delivery Date</span> </div> <nz-date-picker nzSize="large" nzPlaceHolder="Choose a date" formControlName="delivery_date" > </nz-date-picker> </div> ts： initializeForm() { this.purchaseOrderForm = new FormGroup({ issue_date: new FormControl(new Date().toISOString()), delivery_date: new FormControl('', Validators.compose([ Validators.required, ])), }) } 我想根据问题日期禁用之前的日期如果issue_date是：05-05-2024，那么在delivery_date，它将禁用issue_date的前一个日期，如果我更改它也将作为禁用前一个日期的方式工作。 [n.b：issue_date默认值是第一次设置为当前日期，因此用户可以根据需要更改它，但如果不更改它将设置为当前日期] 您可以向 [nzDisabledDate] 提供包含禁用日期逻辑的功能到您的 delivery_date 日期选择器。 <nz-date-picker nzSize="large" nzPlaceHolder="Choose a date" formControlName="delivery_date" [nzDisabledDate]="disabledDeliveryDate" > </nz-date-picker> disabledDeliveryDate = (date: Date): boolean => { let issueDate = this.purchaseOrderForm.controls.issue_date.value; if (!issueDate || !date) { return false; } return date.getTime() <= new Date(issueDate).getTime(); }; 演示@StackBlitz 您需要使用 nzDisabledDate 属性并提供一个函数，该函数返回一个布尔值，确定是否需要禁用/启用日期。下面是工作示例！ HTML <nz-date-picker nzSize="large" nzPlaceHolder="Choose a date" formControlName="delivery_date" [nzDisabledDate]="disabledDate" > </nz-date-picker> TS disabledDate = (current: Date): boolean => { const issueDateCtrl = this.purchaseOrderForm.get('issue_date'); const issueDateValue = issueDateCtrl?.value || null; // Can not select days before today and today return issueDateValue ? differenceInCalendarDays(current, new Date(issueDateValue)) < 0 : false; }; 完整代码： import { Component } from '@angular/core'; import { FormGroup, FormControl, Validators } from '@angular/forms'; import { differenceInCalendarDays, setHours } from 'date-fns'; import { DisabledTimeFn, DisabledTimePartial } from 'ng-zorro-antd/date-picker'; @Component({ selector: 'nz-demo-date-picker-disabled-date', template: ` <form [formGroup]="purchaseOrderForm"> <div class="col-sm-6 col-md-3 form-group"> <div class="label-mini"> <span>Issue Date</span> </div> <nz-date-picker nzSize="large" nzPlaceHolder="Choose a date" formControlName="issue_date"> </nz-date-picker> </div> <div class="col-sm-6 col-md-3 form-group"> <div class="label-mini"> <span>Delivery Date</span> </div> <nz-date-picker nzSize="large" nzPlaceHolder="Choose a date" formControlName="delivery_date" [nzDisabledDate]="disabledDate" > </nz-date-picker> </div> </form> `, styles: [ ` nz-date-picker, nz-range-picker { margin: 0 8px 12px 0; } `, ], }) export class NzDemoDatePickerDisabledDateComponent { purchaseOrderForm = new FormGroup({ issue_date: new FormControl(new Date().toISOString()), delivery_date: new FormControl( '', Validators.compose([Validators.required]) ), }); disabledDate = (current: Date): boolean => { const issueDateCtrl = this.purchaseOrderForm.get('issue_date'); const issueDateValue = issueDateCtrl?.value || null; // Can not select days before today and today return issueDateValue ? differenceInCalendarDays(current, new Date(issueDateValue)) < 0 : false; }; } Stackblitz 演示

angular components ng-zorro-antd

回答 2 投票 0

在服务端组件之间共享数据

我可以提高效率，而不必两次调用 getPosts 吗？我想使用初始帖子来创建不同的布局，但我不想继续使用 getPosts() 或者这不是 po...

next.js async-await components server-side-rendering

回答 2 投票 0

如何使用 contentlayer 创建自定义 JSX 组件？

我尝试使用 contentlayer 创建自定义组件，但它没有按预期工作。起初，我认为我必须在 .mdx 文件中导入自定义组件。但是，每次我这样做...

reactjs components jsx mdx contentlayer

回答 1 投票 0

使用vue.js在子组件中调用父方法

我只想知道如何从子组件调用父函数。我尝试使用 $parent 来调用父方法，但出现此错误类型错误：_this.$parent.forceRender 不是

vue.js methods components parent-child parent

回答 2 投票 0

在 React 中将一个单独的 div 附加到另一个组件中

我创建了一个带有输入框的注释，但我不知道如何将注释附加到输入框的 div 中。输入框位于 CreateArea.jsx 内的 CreateArea 函数中，Note 函数...

reactjs grid components

回答 1 投票 0

如何在React中泛化动态列表组件

我正在 React Native 中创建一个应用程序，我将在其中多次使用组件。现在，所有列表都非常相似，唯一的动态元素是列表内的数据。 ...

react-native expo components dry

回答 1 投票 0

用户访问多个组件的UML聚合

获得以下构建块视图级别 1 的图（此处不允许使用技术单元）。显示的每个组件都与用户进行交互。顶部的 UML 端口 (baz) 应该可视化 u...

architecture components uml aggregation

回答 1 投票 0

@Value 注解在构造函数中不起作用

为什么 Spring @Value 注解在构造函数中不起作用？我有这个电子邮件类正在读取一些电子邮件相关的配置。在构造函数中，如果我放置一个断点，则值是...

components inversion-of-control autowired spring-annotations spring-bean

回答 4 投票 0

props 可以传递到 tailwindcss 类中吗？

我正在尝试做的事情 - 创建一个可重用的组件，将值传递到扩展的背景图像类中。问题 - 直到我第一次使用

css components tailwind-css extend solid-js

回答 1 投票 0

删除React组件内容可编辑警告

我创建了一个反应组件，它是弹出悬停中模型内的一个表单。但是每次我加载页面时，都会在控制台中收到以下警告，我想将其删除。这是战争...

javascript reactjs console components warnings

回答 1 投票 0

防止创建样式表文件。离子

我想使用原理图“ionic g c ...”生成一个没有样式表文件的新组件在此输入图像描述离子信息离子 CLI：7.2.0 离子框架...

angular ionic-framework components styled-components angular-schematics

回答 1 投票 0

Angular 独立组件（使用 LoadComponent）- 延迟加载服务不工作

服务无法在组件中运行。并且控制台上没有错误。保持组件继续加载。当我从组件中删除服务时，它开始正常工作。有一些问题...

angular service components lazy-loading

回答 1 投票 0

Angular 双列表更改滚动条轨道颜色

我正在使用 AngularDualListBoxModule：从 'Angular-dual-listbox' 导入 { AngularDualListBoxModule }；我想将滚动条颜色从蓝色更改为绿色（上图）。实际双L...

angular components angular6

回答 2 投票 0

如何在react JS中使用map函数？我无法使用映射函数来运行循环来循环组件代码。我怎样才能运行它？

App.js具体代码： {blog.map((v, i) => ( ))} App.js具体代码： <Container> <Row> {blog.map((v, i) => ( <ProductItems key={i} blog={v}/> ))} </Row> </Container> function ProductItems() { return ( <Col lg="3" md="6"> <Card > <Card.Img variant="top" src="placeholder.js/100px180" /> <Card.Body> <Card.Title>Card Title</Card.Title> <Card.Text> Some quick example text to build on the card title and make up the bulk of the card's content. </Card.Text> <Button variant="primary">Go somewhere</Button> </Card.Body> </Card> </Col> ); } blog.jsx代码： export let blog = [ { "blog": [ { "userId": 1, "id": 1, "title": "are or do repels provide blacked out to accept the option criticizes", "body": "because and accepts\naccepts the result of refusal convenient and when which is all\nof our things, but they are the thing that will happen to the architect" }, { "userId": 1, "id": 2, "title": "who is to be", "body": "is of things at the time of life\nthey are nothing to follow let the pain of the blessed rebuke those pains and not run away from the caresses of the pleasure, nor any trouble" }, { "userId": 1, "id": 3, "title": "who is to be", "body": "is of things at the time of life\nthey are nothing to follow let the pain of the blessed rebuke those pains and not run away from the caresses of the pleasure, nor any trouble" }, { "userId": 1, "id": 4, "title": "who is to be", "body": "is of things at the time of life\nthey are nothing to follow let the pain of the blessed rebuke those pains and not run away from the caresses of the pleasure, nor any trouble" }, { "userId": 1, "id": 5, "title": "who is to be", "body": "is of things at the time of life\nthey are nothing to follow let the pain of the blessed rebuke those pains and not run away from the caresses of the pleasure, nor any trouble" }, { "userId": 1, "id": 6, "title": "who is to be", "body": "is of things at the time of life\nthey are nothing to follow let the pain of the blessed rebuke those pains and not run away from the caresses of the pleasure, nor any trouble" } ] } ] {描述：blog.jsx 包含 json 代码和我尝试通过地图函数循环的对象。 App.js 文件包含 ProductItems 组件和函数以及映射函数。} 我尝试重复 ProductItems 代码，因为它有卡代码。并期待这个结果并没有发生。更正您的对象声明。你添加了一些不必要的东西。代替： export let blog = [{ "blog": [....] }] 应该是： export let blog = [{ "userId": 1, "id": 1, "title": "...", "body": "...." }]; 为了你的对象 blog[0]?.blog?.map((blog)=>{ return <ProductItems key={blog?.id} blog={blog}/> }) 这会起作用

javascript reactjs json function components

回答 1 投票 0

如何在java中创建加载栏

我需要使用 java swing 创建一个进度条作为我的独立应用程序的加载屏幕。

java swing components progress-bar

回答 1 投票 0

我的 CSS 文件未加载到我的 React 项目中

我是新来反应的。尝试将 CSS 应用于我的组件类，但它不适用于该类。我的文件夹结构： App.jsx 文件代码：从“./components/FoodItems&...

css reactjs components

回答 1 投票 0

STRAPI RestAPI - 如何将图像上传到组件中的媒体字段？ 4.2

我对 Strapi v4 有一个很大的疑问，我知道很多人都在问。但我花了4个小时上网，发现了很多案例，但没有一个解决或者只是