有没有一种方法可以实现不包含标签的内容投影？ 这是我的组件： 有没有一种方法可以实现不包含标签的内容投影？ 这是我的组件： <div class="flex flex-column container"> <div class="flex flex-column header"> <ng-content select="[header]"></ng-content> </div> <div class="flex flex-column body"> <ng-content></ng-content> </div> <div class="flex flex-column footer"> <ng-content select="[footer]"></ng-content> </div> </div> 请注意，有两个可能的插槽 header 和 footer。这些组件应该这样使用： <div header>Header</div> Body <div footer>Footer</div> 如果没有这个div我该如何使用这个组件？我的意思是，我只想添加内容，因为如果我添加 div，它可能会破坏布局。 您可以尝试在 ngProjectAs 标签上使用 ng-container 属性： <ng-container ngProjectAs="[header]">Header</ng-container> Body <ng-container ngProjectAs="[footer]">Footer</ng-container> 更多相关内容请参见 Angular 文档
Angular Material 6 网格列表对齐项目并将内容对齐到 flex-start
我正在尝试使用 Angular Material 6 动态网格列表。与文档相关的示例将网格的内容放在每个图块的中心。请参阅此处的示例 我想要内容进去...
我有一个有 2 列的弹性容器。 每列也是一个弹性容器，里面有许多盒子。 我有一个 flex 容器，有 2 列。 每列也是一个弹性容器，里面有许多盒子。 <div class="flex-container"> <div class="column left-column"> <div class="box boxA">Box A</div> <div class="box boxB">Box B</div> </div> <div class="column right-column"> <div class="box boxC">Box C</div> <div class="box boxD">Box D</div> <div class="box boxE">Box E</div> </div> </div> 我希望在移动视图中，2 列变成 1。 现在，我通过将 flex-direction: column 添加到 flex-container 来实现这一点，这使得 2 列彼此重叠（垂直，而不是 z 轴）。 .flex-container { display: flex; gap: 10px; padding: 10px; max-width: 800px; } .column { display: flex; flex-direction: column; flex: 1; gap: 10px; } .left-column { flex: 2; } .right-column { flex: 1; } .box { border: 1px solid lightgrey; border-radius: 8px; padding: 8px; } @media (max-width: 800px) { .flex-container { flex-direction: column; } } 但现在我还需要重新排列框的顺序，以便在移动视图中显示为 A、C、D、E、B。 我认为仅使用 CSS 无法实现这一点，因为它需要“破坏”弹性列。 这是我目前拥有的沙箱：https://codepen.io/marcysutton/pen/ZYqjPj 顺便说一句，这是在 React 应用程序中，所以我可能必须以编程方式重新排列框。 如果可能的话，我只是更喜欢使用 CSS 来做到这一点。 在下部宽度处使用 display: contents“破坏”包装 div，然后在 order 上使用 .boxB。 .flex-container { display: flex; gap: 10px; padding: 10px; max-width: 800px; } .column { display: flex; flex-direction: column; flex: 1; gap: 10px; } .left-column { flex: 2; } .right-column { flex: 1; } .box { border: 1px solid lightgrey; border-radius: 8px; padding: 8px; } @media (max-width: 800px) { .flex-container { flex-direction: column; } .column { display: contents; } .boxB { order: 2; } } <div class="flex-container"> <div class="column left-column"> <div class="box boxA">Box A</div> <div class="box boxB">Box B</div> </div> <div class="column right-column"> <div class="box boxC">Box C</div> <div class="box boxD">Box D</div> <div class="box boxE">Box E</div> </div> </div>
我在我的角度应用程序中使用角度材料2。当我的表单输入字段错误消息超过一行时，我遇到了问题。这是照片： 这是代码： 我在我的角度应用程序中使用角度材料 2。当我的表单输入字段错误消息超过一行时，我遇到了问题。这是照片： 这是代码： <md-error *ngIf="password.touched && password.invalid"> <span *ngIf="password.errors.required"> {{'PASSWORD_RECOVERY.FIELD_REQUIRED' | translate}} </span> <span *ngIf="password.errors.minlength || password.errors.maxlength"> {{'PASSWORD_RECOVERY.PASSWORD_LENGTH' | translate}} </span> <span *ngIf="password.errors.pattern"> {{'PASSWORD_RECOVERY.FOR_A_SECURE_PASSWORD' | translate}} </span> </md-error> 我通过阅读 github 了解到，这是 Angular 2 材料中的一个错误。有人通过自定义解决方法成功解决了这个问题吗？ 问题是类为 .mat-form-field-subscript-wrapper 的元素是 position: absolute，所以它不占用实际空间。 按照 xumepadismal 在 github 上关于此问题的建议，您可以添加此 scss 作为解决我的问题的解决方法： // Workaround for https://github.com/angular/material2/issues/4580. mat-form-field .mat-form-field { &-underline { position: relative; bottom: auto; } &-subscript-wrapper { position: static; } } 它会转换静态 div 中的 .mat-form-field-subscript-wrapper 节点，并将 .mat-form-field-unterline 重新定位在输入字段之后。 正如材料 15 中在 github 讨论中提到的，可以通过将 subscriptSizing="dynamic" 添加到 mat-form-field 来解决问题。 要更改默认行为，您必须使用以下选项更新 angular.module.ts 提供程序： providers: [ { provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { subscriptSizing: 'dynamic' } } ] 这也可以在材料文档中找到 使用@mattia.corci提出的解决方案会导致错误消息被推到底部太多，从而在顶部留下不必要的空白空间。 使用 Tailwind CSS，这个解决方案对我来说适用于最新的 Angular 17： .mat-mdc-form-field { @apply w-full self-start; .mat-mdc-form-field-subscript-wrapper { @apply flex; .mat-mdc-form-field-error-wrapper { @apply static; } } } mat-form-field.ng-invalid.ng-touched { animation: example; animation-duration: 0.3s; margin-bottom: 20px; } @keyframes example { from { margin-bottom: 0; } to { margin-bottom: 20px; } } 它对我有用。
从 Angular 16 转换为 Angular 17 后缺少 SSR 支持
我已将我的项目从 Angular 16 升级到 Angular 17。但是，我目前没有收到服务器端渲染 (SSR) 的支持。从 Angular 16 迁移后，Angular 是否提供 SSR 支持...
AppEngine Flex 部署失败 - flex_await_healthy ... /bin/sh：gunicorn：未找到
我尝试使用自定义运行时构建AppEngine Flex实例，包含 Python 3.11 火狐浏览器 因此，在运行 pip 来安装依赖项时，出现了我正在运行 pipas root 的警告，...
使用自定义 python 和 virtualenv 的 AppEngine Flex 实例部署失败
我尝试使用自定义运行时构建AppEngine Flex实例，包含 Python 3.11 火狐浏览器 因此，在运行 pip 来安装依赖项时，出现了我正在运行 pipas root 的警告，...
如何在 Flex 容器下方添加图像，同时使两个元素都能响应媒体查询？
我是 Flexbox 新手，非常想在 Flex 容器下方添加一个单独的独立图像。我希望“底部”元素的图像和容器的元素都是
我有一个带有 flex-wrap:wrap 集的 Flex 容器。有没有办法让最后一个弹性项目（示例中的“未知”按钮）仅在换行到新行时才填充剩余空间？它...
在我的 Next.js Web 应用程序中，我有一个页面，如下所示： 我想让该部分（用 标签包裹）以蓝色粘性突出显示，这样当我滚动时，它会保持在原来的位置，并且只有 m... 在我的 Next.js Web 应用程序中，我有一个页面，如下所示： 我想使该部分（包含在 <aside> 标签中）以蓝色粘性突出显示，这样当我滚动时，它会保持在原来的位置，并且只有主要部分（包含图表的部分）会滚动。 这是 layout.tsx 文件： import { dashboardConfig } from "@/config/dashboard"; import { MainNav } from "@/components/nav/main-nav"; import { DashboardNav } from "@/components/nav/dashboard-nav"; interface DashboardLayoutProps { children?: React.ReactNode; } export default async function DashboardLayout({ children, }: DashboardLayoutProps) { return ( <div className="flex min-h-dvh flex-col relative"> <header className="container z-40 bg-background"> <MainNav /> </header> <div className="container grid flex-1 gap-12 md:grid-cols-[200px_1fr] mt-32 mb-12 relative"> <aside className="hidden w-[200px] flex-col md:flex sticky top-0"> <DashboardNav items={dashboardConfig.sidebarNav} /> </aside> <main className="flex w-full flex-1 flex-col overflow-hidden"> {children} </main> </div> </div> ); } 请注意，我已将类 sticky 和 top-0 应用于我想要粘贴位置的部分。但它不起作用。 我做错了什么？ 考虑通过 align-self: start 将 self-start 应用到粘性元素。默认情况下，它将具有 align-self: stretch，这将使其成为其父网格元素的完整高度，因此不会观察到粘性效果。通过应用 align-self: start，它的高度将仅与其内容一样高，如果存在垂直自由空间，则可以观察到粘性效果。 const dashboardConfig = { sidebarNav: '' }; const MainNav = () => 'MainNav'; const DashboardNav = () => 'DashboardNav'; function DashboardLayout({ children, }) { return ( <div className="flex min-h-dvh flex-col relative"> <header className="container z-40 bg-background"> <MainNav /> </header> <div className="container grid flex-1 gap-12 md:grid-cols-[200px_1fr] mt-32 mb-12 relative"> <aside className="hidden w-[200px] flex-col md:flex sticky top-0 self-start"> <DashboardNav items={dashboardConfig.sidebarNav} /> </aside> <main className="flex w-full flex-1 flex-col overflow-hidden"> {children} </main> </div> </div> ); } function App() { return ( <DashboardLayout> <div class="h-[200vh]"></div> </DashboardLayout> ); } ReactDOM.createRoot(document.getElementById('app')).render(<App/>); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js" integrity="sha512-8Q6Y9XnTbOE+JNvjBQwJ2H8S+UV4uA6hiRykhdtIyDYZ2TprdNmWOUaKdGzOhyr4dCyk287OejbPvwl7lrfqrQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js" integrity="sha512-MOCpqoRoisCTwJ8vQQiciZv0qcpROCidek3GTFS6KTk2+y7munJIlKCVkFCYY+p3ErYFXCjmFjnfTTRSC1OHWQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="https://cdn.tailwindcss.com/3.4.1"></script> <div id="app"></div>
Angular CLI 版本与 Angular Core 版本之间的兼容性？
有什么方法可以知道要安装哪个与我的 Angular Core 版本兼容的 Angular CLI 版本？他们完全独立吗？ 使用 Core v5.2.8 开发现有的 Angular 应用程序...
我可以在 Flex 帐户中使用主要 Twilio 帐户中的电话号码吗？
我有一个主 Twilio 帐户，用于管理我的电话号码，目前我正在探索 Twilio Flex 来满足我的联络中心需求。是否可以使用我的主要 Twilio 帐户中的电话号码...
我尝试在 Angular 17 中使用 NG Block UI 并收到此错误 ng block ui error in Angular 17 知道这个模块在 Angular 17 中如何工作吗？ 提前致谢 我使用 npm i ng-
Angular Material v17：缺少“MatFormFieldAppearance”中的“遗产”
在 Angular Material v14 中，MatFormFieldAppearance 提供了传统、标准、填充和轮廓值。 类型 MatFormFieldAppearance = '旧版' | '标准' | '填充' | '大纲'; 然而，在 Angular
由于某种原因，自从从 Angular 13 升级到 Angular 15 后，当我输入： ng g c 某些组件 Angular 复制组件，创建重复文件。这种情况 100% 都会发生。第二次...
单击 p 标签旁边的按钮时获取 p 标签的内部文本（无 Jquery）
我有几个盒子，每个盒子都包含按钮和一个 元素，其内部文本是由 API 中的数据创建的。我在每个框上放置了一个 onclick（包裹 的 ） 我有几个盒子，每个盒子都包含按钮和一个 <p> 元素，其内部文本是由 API 中的数据创建的。我在每个框上放置了一个 onclick（包裹 <div> 元素和按钮的 <p>）。我希望每次单击该按钮时，位于该按钮旁边（位于同一 div 中）的 innerText 标签的 <p> 都会控制台日志。目前无法弄清楚，这就是我到目前为止所得到的： const containerShapes = document.getElementById("container-pock-shape") fetch("https://pokeapi.co/api/v2/pokemon-shape") .then(res => res.json()) .then(data => data.results.map(item => { return containerShapes.innerHTML += `<div class="shape-box" onclick="showName(event)"> <p>${item.name}</p> <button>Select</button> </div>` })) function showName(e) { console.log() } #container-pock-shape { display: flex; flex-wrap: wrap; } .shape-box { border: 2px solid red; display: flex; flex-direction: column; align-items: center; padding: 10px; width: 200px; } .shape-box p { background-color: grey; width: 100px; text-align: center; font-weight: 900; } <body> <div id="container-pock-shape"> </div> </body> 您可以使用最近的。当您需要 forEach 或正确使用地图时也不要使用地图 我还强烈建议授权（点击 div） const containerShapes = document.getElementById("container-pock-shape") fetch("https://pokeapi.co/api/v2/pokemon-shape") .then(res => res.json()) .then(data => containerShapes.innerHTML = data.results .map(({name}) => `<div class="shape-box"> <p>${name}</p> <button>Select</button> </div>`)); containerShapes.addEventListener("click", e => { const tgt = e.target.closest("button") if (tgt) console.log(tgt.closest("div.shape-box").querySelector("p").innerText) }) #container-pock-shape { display: flex; flex-wrap: wrap; } .shape-box { border: 2px solid red; display: flex; flex-direction: column; align-items: center; padding: 10px; width: 200px; } .shape-box p { background-color: grey; width: 100px; text-align: center; font-weight: 900; } <body> <div id="container-pock-shape"></div> </body> 要获取名称，由于事件位于整个 div 上，因此您需要使用 querySelector 并找到内部 <p> 元素并获取其文本。 const containerShapes = document.getElementById("container-pock-shape") fetch("https://pokeapi.co/api/v2/pokemon-shape") .then(res => res.json()) .then(data => data.results.map(item => containerShapes.innerHTML += `<div class="shape-box" onclick="showName(this)"> <p>${item.name}</p> <button>Select</button> </div>` )) function showName(box) { const name = box.querySelector('p').textContent; console.log(name); } #container-pock-shape { display: flex; flex-wrap: wrap; } .shape-box { border: 2px solid red; display: flex; flex-direction: column; align-items: center; padding: 10px; width: 200px; } .shape-box p { background-color: grey; width: 100px; text-align: center; font-weight: 900; } <body> <div id="container-pock-shape"></div> </body> 执行此操作的另一种方法是将单击事件仅添加到按钮，然后查找 closest 形状框，然后找到 <p>。 const containerShapes = document.getElementById("container-pock-shape") fetch("https://pokeapi.co/api/v2/pokemon-shape") .then(res => res.json()) .then(data => data.results.map(item => containerShapes.innerHTML += `<div class="shape-box"> <p>${item.name}</p> <button onclick="showName(this)">Select</button> </div>` )) function showName(button) { const name = button.closest('.shape-box').querySelector('p').textContent; console.log(name); } #container-pock-shape { display: flex; flex-wrap: wrap; } .shape-box { border: 2px solid red; display: flex; flex-direction: column; align-items: center; padding: 10px; width: 200px; } .shape-box p { background-color: grey; width: 100px; text-align: center; font-weight: 900; } <body> <div id="container-pock-shape"></div> </body> 嘿，我最近找到了解决此问题的简单方法（当然，如果您的文本不像按钮文本那样太长）：您可以将内部文本作为元素的 id 提供。并且在事件处理程序中，您可以通过以下方式访问内部文本：这样：e.target.id希望这个解决方案可以帮助你:)
我有几个 Angular 应用程序在 nx 工作区中运行。所有这些应用程序都使用 Angular Material 对话框。为此，我通常创建这样的 Angular 服务： 导入 { 管理组件 }
NLog 存档每天都不起作用。但它每分钟都有效 NLog版本5.0.7 这是我的配置 NLog 每天存档不起作用。但它每分钟都有效 NLog版本5.0.7 这是我的配置 <target name="Httpfile" layout="${longdate} ${uppercase:${level}} correlationId-${activityid} - ${message} ${exception:format=tostring}" xsi:type="File" fileName="${logFullName}-http-api-${shortdate}.log" archiveFileName="${logFullNameArchive}-archive-Http-api-${shortdate}-{#####}.zip" archiveEvery="Day" concurrentWrites="true" keepFileOpen="false" archiveNumbering="DateAndSequence" maxArchiveFiles="30" maxArchiveDays="7" enableArchiveFileCompression="true" /> 使用 archiveEvery="Minute" 效果很好 不支持在NLog FileTarget中混合静态和动态归档逻辑。 使用静态归档逻辑时，不应在 ${shortdate} 和 fileName="..." 中使用 archiveFileName="..."。 像enableArchiveFileCompression="true"这样的一些功能仅受静态归档逻辑支持： <target name="Httpfile" layout="${longdate} ${uppercase:${level}} correlationId-${activityid} - ${message} ${exception:format=tostring}" xsi:type="File" fileName="${logFullName}-http-api.log" archiveFileName="${logFullNameArchive}-archive-Http-api-{#####}.zip" archiveNumbering="DateAndSequence" archiveDateFormat="yyyyMMdd" archiveEvery="Day" concurrentWrites="true" keepFileOpen="false" maxArchiveFiles="30" maxArchiveDays="7" enableArchiveFileCompression="true" /> 另请参阅：https://github.com/NLog/NLog/wiki/FileTarget-Archive-Examples
我正在使用 nextjs 的 withlayout 函数为某些页面添加侧边栏。 导出类型 PageWithLayout = NextPage & { withLayout？：（页面：ReactElement）=> 我正在使用 nextjs 的 withlayout 函数为某些页面添加侧边栏。 export type PageWithLayout<P = {}, IP = P> = NextPage<P, IP> & { withLayout?: (page: ReactElement) => ReactNode; }; 这是我的使用方法： export const Interactions: PageWithLayout = () => { const [ getInteractions, { data: interactionData, fetchMore, variables, loading: isInteractionsLoading, error: isInteractionsError, }, ] = useGetInteractionsLazyQuery({ notifyOnNetworkStatusChange: true, fetchPolicy: "network-only", ssr: false, }); return ( <> <Box height={"100vh"}> </Box> </> ); }; Interactions.withLayout = (page: ReactElement) => { // how do I pass isInteractionsLoading as a prop to this component return <Layout>{page}</Layout>; }; export default Interactions; 我想要实现的是将 isInteractionsLoaded 和 isInteractionsError 作为属性传递给我的布局组件，以便我可以渲染这些状态。有没有一种方法可以实现此目的，而无需将布局组件移动到页面组件内？ 创建一个包装组件的 React Context 提供程序可能是您使用的解决方案，如果您不想使用任何其他包或不想使用 redux 等更强大的工具，则可以使用。 但是在这里使用有点尴尬，具体取决于包含交互的组件树是什么样子。否则可以根据您的需要使用 _app 入口点。 示例上下文和用法 import React from 'react'; export const InteractionContext = React.createContext({ isInteractionsLoading: false, isInteractionsError: null, }); // parent component or _app if necessary const ProviderComponent = () => { return ( <InteractionContext.Provider value={{ isInteractionsLoading, isInteractionsError }}> <Interactions /> </InteractionContext.Provider> ); }; const Layout = ({ children }) => { const { isInteractionsLoading, isInteractionsError } = useContext(InteractionContext); // Now you can use isInteractionsLoading and isInteractionsError here // ... return <div>{children}</div>; };
我的 Angular 项目有问题。我有一个项目结构：应用程序结构。在我的 app.module.ts 中，代码如下： 从'@angular/core'导入{NgModule}； 从'@
Angular 项目不适用于@babylonjs/viewer
我在全球安装了@Angular/[email protected]。我使用命令行“ng new BabylonTest --routing false --style css --skip-git --skip-tests”创建了一个 Angular 项目。 CD 到文件夹“Babyl...
使用模块联盟进行 Angular 升级 - “集合没有原理图。”
我正在将一组 Angular 应用程序从 v12 升级到 v16，它们使用模块联合和 Angular Architects 的模块联合插件。 成功升级每个应用程序的 Angular 版本后...
Node Sass 版本 9.0.0 与 ^4.0.0 不兼容
我的应用程序中没有安装node-sass或sass包。但我一直收到这个错误 ./src/scss/styles.scss 中的错误（./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plu...
我正在使用以下文档学习放大器 https://docs.amplify.aws/angular/start/getting-started/installation/ https://docs.amplify.aws/angular/start/getting-started/setup/ 但同时
Material-UI DataGrid 隐藏特定单元格的标题分隔符
有没有办法隐藏特定（或所有）单元格的标题列分隔符？ 这是我的列定义 const orderCols = [ { 字段：'DOCDATE'， headerName：'Fecha'，flex：1 ...
在我多年的编码生涯中，我从未遇到过像我现在在屏幕上看到的那样荒谬的事情。 我已经实现了一个 display:flex 属性，带有...
登录后，使用 angular-oauth2-oidc 时，hasValidAccessToken 始终为 true
我已经使用 Angular 12.2 实现了 angular-oauth-oidc （版本 12.1.0）。我使用 Keycloak 作为 SSO 登录没有问题，但我在库中遇到了奇怪的行为。 每次，之后...
我有三个段落元素。三人分成三部分。我不希望它们改变大小或位置。但我无法做到这一点。也许用flex可以做到。 CSS 真的...
通过Angular到Springboot访问POST失败但GET成功，Postman适用于GET和POST
我正在使用示例 Angular 应用程序来测试 Okta 与 springboot 应用程序的集成。 前端示例：https://github.com/okta-samples/okta-angular-sample 我有一个带有
类型“string”无法分配给类型“FormGroup<any>”Angular 14 错误
我是一名初学者 Angular 开发人员，我正在使用本教程构建一个 todoList 应用程序 -> https://www.youtube.com/watch?v=WTn2nVphSl8 它是使用 Angular 13 完成的。我遇到错误的是我...
Angular Material 17 独立组件中没有 DateAdapter 的提供者
我有一个带有 Angular 17 应用程序的 nx 项目，并尝试使用带有材料 17.0.4 的 Angular 材料日期选择器。但我明白了 NullInjectorError：没有 DateAdapter 的提供者！ 错误。组件...
应用程序无法识别手势，例如在 Angular 11 中使用 Hammer.JS 进行平移
我无法在使用 Hammer.JS 的 Angular 应用程序中识别任何手势，例如滑动、平移。它的设置是这样的： 包.json： “@角度/核心”：“11.0.5”， “@Angular/platform-br...
如何在忽略边距时使两个弹性项目居中？在下面的示例中，h1 的边距不对称，当使用align-items:center 时，它看起来不太好。我不想将 flex 放在 h1 元素 b 上...
全新安装 Nodejs (20.10.0) 和 Angular (17.0.8)。新项目（“ng new Default”），没有文件更改。 “ngserve”没有错误，但浏览器控制台显示： main.ts:5 错误
为什么我的应用程序根目录在 Angular 中不是 100% 高度？
这是我的第一个 Angular 项目，我对 Web 开发还很陌生。我正在使用 Angular 17.0.9。 我希望我的应用程序为 100%，但应用程序根标签始终是可能的最小高度 当你...
如何在flex-grow容器中创建响应式表格而不影响整体布局？
我正在使用 Bootstrap 5.3 开发响应式布局，其中包括导航栏、侧栏、内容面板和状态栏。该应用程序应始终为 100% 视图高度和视图宽度，并包含所有信息...
我创建了一个“自定义”主题（使用 https://material.angular.io/guide/theming 上的主题文档，这非常糟糕），如下所示： @import '~@angular/material/theming'; @包括 mat-cor...
Angular 17：fileReplacements 不替换文件
我有一个 C#/Angular 17 SPA 项目，在具有多个部署槽的 Azure 应用服务上的 Docker 容器中运行。基本上，生产槽加载标记为“latest-prod”的图像......
Angular 12：Firebase 模块未正确提供（？）
第一次使用Firebase，所以我不知道发生了什么。我没有修改使用 ng add @angular/fire 获得的配置，所以我的 AppModule 中的内容是： @NgModule({ 声明：[
如何将 swiper 11.0.5 元素与 Angular 17 一起使用
在 Angular 17 中，一切都是独立组件，并且没有 app.module.ts 文件。那么，我们把这段代码放在哪里， 从“swiper/element”导入{register}； 登记（）; 我正在...
我的 Angular 应用程序遇到问题，收到错误 8001。我不知道如何处理它。谁能帮我这个？谢谢你！ 应用程序组件.html {{标题}}&l... 我的 Angular 应用程序遇到问题，收到错误 8001。我不知道如何处理它。谁能帮我这个？谢谢！ app.component.html <h1>{{ title }}</h1> <p>Congratulations! Your app is running. 🎉</p> <app-welcome></app-welcome> app.component.ts import { Component } from '@angular/core'; import { CommonModule } from '@angular/common'; import { RouterOutlet } from '@angular/router'; @Component({ selector: 'app-root', standalone: true, imports: [CommonModule, RouterOutlet], templateUrl: './app.component.html', styleUrl: './app.component.css' }) export class AppComponent { title = 'XYZCARS'; } welcome.component.ts import { Component } from '@angular/core'; @Component({ selector: 'app-welcome', templateUrl: './welcome.component.html', styleUrl: './welcome.component.css' }) export class WelcomeComponent { car = 'toyota'; } 我的项目最初没有 app.module.ts 文件。我自己添加了它并根据网上找到的一些信息进行了配置，但问题仍然存在并且仍未解决。谁能帮我解决这个问题吗？ app.module.ts import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { WelcomeComponent } from './welcome/welcome.component'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent, WelcomeComponent ], imports: [ BrowserModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } 如果您正在 Angular 17 中创建项目->使用这些命令 ng app --no-standalone 然后你就得到了 app.module.ts 文件。
我目前正在开发 Angular 前端。 我想使用由我正在合作的团队创建的组件，该组件用于在表单中创建输入文本。 该组件的 .html...
当element在element上使用迭代变量时如何重构ngFor？
我有这个 {{ dt }} 我想重构为 Angular v17
我在 Angular 项目中面临一个问题，其中选项表单中有多个复选框。问题是有时复选框中的更改无法正确反映。这是相关内容...
在 Angular 中，位置是“应用程序可以用来与浏览器 URL 交互的服务”。 它提供了一个 getState() 方法，该方法提供“位置历史记录的当前状态&
选中/取消选中 mat-checkbox 未正确返回 true 或 false
我正在使用 Angular 15 和 Angular Material 14，下面是我用来显示复选框列表的 HTML 代码 我正在 Angular 15 和 Angular Material 14 工作，下面是我用来显示复选框列表的 HTML 代码 <div *ngFor="let control of checkboxArray.controls;let i = index" > <mat-checkbox [formControl]="control" (input)="validateInputs(notificationForm)" [checked]="control.value" (change)="control.checked=$event.checked;onCheckedChange(i);"> {{ checkboxItems[i].name }} </mat-checkbox> </div> 下面是Angular中onCheckedChange函数的代码 onCheckedChange(index: number) { this.sortCheckboxArray(); const checkboxItem = this.checkboxItems[index]; const control = this.checkboxArray.at(index); if (control) { if (control.value) { this.lists.push(checkboxItem.id.toString()); } else { this.lists.pop(checkboxItem.id.toString()); } } this.updateSubscriberGroupsCount(); this.cdr.detectChanges(); } 当我选中复选框时，在这个 onCheckedChange 函数中，control.value 始终返回 false。哪里出了问题？无法理解.. 这是一个工作版本，复选框逻辑工作正常，希望有帮助！ 我们需要使用control.value获取表单组，但我们还需要访问内部表单控件，然后获取复选框值！ import { CommonModule } from '@angular/common'; import { Component } from '@angular/core'; import { FormArray, FormControl, FormGroup, ReactiveFormsModule, } from '@angular/forms'; import { bootstrapApplication } from '@angular/platform-browser'; import 'zone.js'; import { MatCheckboxModule } from '@angular/material/checkbox'; @Component({ selector: 'app-root', standalone: true, imports: [CommonModule, ReactiveFormsModule, MatCheckboxModule], template: ` <form [formGroup]="form"> <div formArrayName="array"> <div *ngFor="let control of checkboxArray.controls;let i = index" [formGroupName]="i"> <mat-checkbox formControlName="test" style="margin-bottom: 15px;" (change)="onCheckedChange(i);"> {{ checkboxItems[i].name }} </mat-checkbox> </div> </div> </form> `, }) export class App { name = 'Angular'; form = new FormGroup({ array: new FormArray([]), }); lists = []; checkboxItems: any = []; ngOnInit() { this.add(); this.add(); this.add(); } add() { this.checkboxArray.push( new FormGroup({ test: new FormControl(false), }) ); this.checkboxItems.push({ name: 'test' }); } get checkboxArray() { return this.form.get('array') as FormArray; } onCheckedChange(index: number) { // this.sortCheckboxArray(); // const checkboxItem = this.checkboxItems[index]; const control = this.checkboxArray.at(index); if (control) { if (control.value.test) { console.log('checked'); // this.lists.push(checkboxItem.id.toString()); } else { console.log('not checked'); // this.lists.pop(checkboxItem.id.toString()); } } // this.updateSubscriberGroupsCount(); // this.cdr.detectChanges(); } } bootstrapApplication(App); 堆栈闪电战
Angular 中的 JavaScript 函数“未定义”错误
我正在尝试让 Angular 17 项目正常运行。我正在使用 Bootstrap (5)，并尝试让 datePicker 工作。这需要一些 JavaScript 代码，但我无法使用这些代码。我已经关注了...
@types/ws 尝试从角度 12 更新到角度 13 时出现错误
我已将我的项目从 Angular 12 更新为 Angular 13，但遇到此错误： 错误：node_modules/@types/ws/index.d.ts:328:18 - 错误 TS2315：类型“服务器”不是通用的。 328服务器？：
如何在 Angular 17 中添加插值而不转义 URL 编码？
我想添加一个routeLink，其中使用Angular插值在字符串中定义完整的URL值，但是当页面执行时，它会转义URL。 预期：http://localhost:4200/books?page=3&sort=...
这是我现在的情况，我的形象是这样的 这是我当前的代码 这是我现在的情况，我的形象是这样的 这是我当前的代码 <View> <Image style={{width: '100%', height: 285}} source={{ uri: `${posterPath + data?.poster_path}`, }} resizeMode="cover" /> <Text>{data?.title}</Text> </View> 我希望我的图像看起来像这样 （这只是一个例子） 我知道在普通的CSS中我们是否可以使用object-position，但不幸的是React Native并不直接支持object-positionCSS属性，所以我很困惑如何实现这个 您需要使用 Flex:1，它使用整个屏幕，然后相应地定位和调整图像大小。 <View style={{flex:1}}> <Image style={{width:'100%', height:285}} source={{ uri: `${posterPath + data?.poster_path}`, }} resizeMode="cover" /> <Text>{data?.title}</Text> </View>