我的 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 文件。
我有这个角度组件,似乎使 TrustPilot 小部件在硬刷新后消失,任何人都可以解释为什么吗? 从 '@angular/core' 导入 { Component, Input, OnInit }; 宣告全球...
选中/取消选中 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 16 转换为 Angular 17 后缺少 SSR 支持
我已将我的项目从 Angular 16 升级到 Angular 17。但是,我目前没有收到服务器端渲染 (SSR) 的支持。从 Angular 16 迁移后,Angular 是否提供 SSR 支持...
我有一个带有选择器的多输入组件,如下所示: 我有一个带有选择器的多输入组件,如下所示: <app-input type="currency" formControlName="currency"></app-input> <app-input type="date" formControlName="dateOfBirth"></app-input> 因此,从该组件中,我有一个像这样的选择器: @Component({ selector: 'app-input[type=currency]', }) @Component({ selector: 'app-input[type=date]', }) 现在,我想添加多个 currency 组件。一种用于默认货币成分,第二种用于具有动态货币符号的货币。 所以,我想通过选项让它变得不同。当选择器有选项时,显示带动态符号的货币,否则或默认,显示不带符号的默认货币。 我一直在尝试使用下面的这个选择器,但它不起作用。 对于默认货币: @Component({ selector: 'app-input:not([options])[type=currency]', }) 对于动态符号货币: @Component({ selector: 'app-input[options][type=currency]', }) 提前谢谢您 您可以像这样添加数据属性来区分选择器 无符号: @Component({ selector: 'app-input[type=currency]', }) 带有符号: @Component({ selector: 'app-input[type=currency][data-symbols]', }) html with symbols: <app-input type="currency" formControlName="currency" data-symbols></app-input> without symbols: <app-input type="currency" formControlName="currency"></app-input>
Angular CLI 版本与 Angular Core 版本之间的兼容性?
有什么方法可以知道要安装哪个与我的 Angular Core 版本兼容的 Angular CLI 版本?他们完全独立吗? 使用 Core v5.2.8 开发现有的 Angular 应用程序...
我尝试在 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% 都会发生。第二次...
我有几个 Angular 应用程序在 nx 工作区中运行。所有这些应用程序都使用 Angular Material 对话框。为此,我通常创建这样的 Angular 服务: 导入 { 管理组件 }
我正在声明其他元素类型应该满足的“父”COMPONENT 类型。如果我在普通的 .ts 或 .tsx 文件中使用下面的代码,它可以正常工作(也就是说,它会显示我无法使用...
我的 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/ 但同时
我有这个 YAML 文件 src/main/resources/foo.yml: 酒吧: - 你好 - 世界 巴兹: - 洛雷姆 - ipsum 这个组件: @成分 公共类我的组件{ 公共我的组件(地图 我有这个 YAML 文件 src/main/resources/foo.yml: bar: - hello - world baz: - lorem - ipsum 这个组件: @Component public class MyComponent { public MyComponent(Map<String, List<String>> foo) { // foo.get("bar") } } 使用 Spring Boot 2.7,是否可以将配置按原样(自己的文件,无前缀,无类)注入到构造函数中? 你可以这样做 @Configuration public class MyConfiguration { @Bean public Map<String, Object> foo(@Value("classpath:foo.yaml") Resource yaml) { Yaml yaml = new Yaml(); return yaml.load(yaml.getInputStream()); } } @Component public class MyComponent { public MyComponent(@Qualifier("foo") Map<String, Object> foo) { ... } }
登录后,使用 angular-oauth2-oidc 时,hasValidAccessToken 始终为 true
我已经使用 Angular 12.2 实现了 angular-oauth-oidc (版本 12.1.0)。我使用 Keycloak 作为 SSO 登录没有问题,但我在库中遇到了奇怪的行为。 每次,之后...
有人知道 Mule 4 相当于下面的 Mule 3 代码吗? 有人知道 Mule 4 相当于下面的 Mule 3 代码吗? <expression-component doc:name="TECH_Heroku_PartKey"><![CDATA[ payload=com.google.common.hash.Hashing.sha1().hashBytes(payload.getBytes("UTF-8")); ]]></expression-component> hashWith()可以在DataWeave 2中使用不同算法生成哈希,包括SHA1。 您需要注意,结果可能会根据有效负载的不同而有所不同。我猜测在 Mule 3 中你正在将 Java 字符串转换为字节。在 Mule 4 中,hashWith() 函数需要一个二进制文件。你会测试一下。 或者,您可以将相同的代码放入 Java 方法中并使用 Java 模块调用它。
通过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...
全新安装 Nodejs (20.10.0) 和 Angular (17.0.8)。新项目(“ng new Default”),没有文件更改。 “ngserve”没有错误,但浏览器控制台显示: main.ts:5 错误
react-hook-form useForm 每次在 Nextjs 页面路由上执行
嗨,我是 Nextjs(v14) 的新手。我想使用react-hook-form 实现多页面表单。 然而,似乎每次都会执行useForm,并且defaultValues是在页面路由中设置的(点击 嗨,我是 Nextjs(v14) 的新手。我想使用react-hook-form 实现多页面表单。 不过,好像每次都会执行useForm,并且在页面路由时设置defaultValues(点击<Link to=XX>)。 如何跨多个页面保存表单数据? 请帮助我。 这是我的代码。 _app.tsx return ( <div> <FormProvider> <Component {...pageProps} /> </FormProvider> </div> ); FormProvider.tsx export const FormProvider = ({ children, }: { children: React.ReactNode; }) => { const defaultValues: MyForm = { name: '', description: '' }; const form = useForm({ defaultValues, resolver: zodResolver(MyFormSchema), }); const onSubmit = () => console.log("something to do"); return ( <Form {...form}> <form onSubmit={form.handleSubmit(onSubmit)}>{children}</form> </Form> ); }; 您正在寻找的是跨多个页面维护的某种全局状态。对于这个例子,我将使用 React 的上下文 API,如果这不适合您的用例,您可以找到一些其他状态管理库。 首先,您需要创建一个全局上下文,并在表单提供程序中包含一个全局状态 // FormProvider.tsx import { createContext, useContext, useState } from 'react'; const FormContext = createContext(); // Exported to be used in other components export const useFormContext = () => useContext(FormContext); export const FormProvider = ({ children }) => { const [formData, setFormData] = useState({}); return ( <FormContext.Provider value={{ formData, setFormData }}> {children} </FormContext.Provider> ); }; 现在您需要用 FormProvider 包装您的应用程序 // You are already doing this part //_app.tsx return ( <div> <FormProvider> <Component {...pageProps} /> </FormProvider> </div> ) 现在你可以像这样使用它了。请记住,您将更新表单的全局状态,该状态将在您的所有页面上发生变化。 // In your form component import { useForm } from 'react-hook-form'; import { useFormContext } from '../path/to/formContext'; const MyFormComponent = () => { const { formData, setFormData } = useFormContext(); const { register, handleSubmit } = useForm({ defaultValues: formData, resolver: zodResolver(MyFormSchema), }); const onSubmit = (data) => { setFormData(data); // Handle form submission }; return ( <form onSubmit={handleSubmit(onSubmit)}> {/* Form fields */} </form> ); }; 您可以从其他页面访问数据的示例 // In another page or component import { useFormContext } from '../path/to/formContext'; const AnotherPage = () => { const { formData } = useFormContext(); // Use formData as needed };
为什么我的应用程序根目录在 Angular 中不是 100% 高度?
这是我的第一个 Angular 项目,我对 Web 开发还很陌生。我正在使用 Angular 17.0.9。 我希望我的应用程序为 100%,但应用程序根标签始终是可能的最小高度 当你...
这是我在 Tabs 组件中使用 VUE 2 的旧代码: 创建(){ this.tabs = this.$children; } 标签: .... 这是我在 Tabs 组件中使用 VUE 2 的旧代码: created() { this.tabs = this.$children; } 标签: <Tabs> <Tab title="tab title"> .... </Tab> <Tab title="tab title"> .... </Tab> </Tabs> VUE 3: 如何使用组合 API 获取有关 Tabs 组件中子项的一些信息?获取长度,迭代它们,并创建选项卡标题,...等?有任何想法吗? (使用组合API) 这是我现在的 Vue 3 组件。我使用 Provide 来获取子 Tab 组件中的信息。 <template> <div class="tabs"> <div class="tabs-header"> <div v-for="(tab, index) in tabs" :key="index" @click="selectTab(index)" :class="{'tab-selected': index === selectedIndex}" class="tab" > {{ tab.props.title }} </div> </div> <slot></slot> </div> </template> <script lang="ts"> import {defineComponent, reactive, provide, onMounted, onBeforeMount, toRefs, VNode} from "vue"; interface TabProps { title: string; } export default defineComponent({ name: "Tabs", setup(_, {slots}) { const state = reactive({ selectedIndex: 0, tabs: [] as VNode<TabProps>[], count: 0 }); provide("TabsProvider", state); const selectTab = (i: number) => { state.selectedIndex = i; }; onBeforeMount(() => { if (slots.default) { state.tabs = slots.default().filter((child) => child.type.name === "Tab"); } }); onMounted(() => { selectTab(0); }); return {...toRefs(state), selectTab}; } }); </script> 选项卡组件: <script lang="ts"> export default defineComponent({ name: "Tab", setup() { const index = ref(0); const isActive = ref(false); const tabs = inject("TabsProvider"); watch( () => tabs.selectedIndex, () => { isActive.value = index.value === tabs.selectedIndex; } ); onBeforeMount(() => { index.value = tabs.count; tabs.count++; isActive.value = index.value === tabs.selectedIndex; }); return {index, isActive}; } }); </script> <template> <div class="tab" v-show="isActive"> <slot></slot> </div> </template> 哦伙计们,我解决了: this.$slots.default().filter(child => child.type.name === 'Tab') 对于想要完整代码的人: 标签.vue <template> <div> <div class="tabs"> <ul> <li v-for="tab in tabs" :class="{ 'is-active': tab.isActive }"> <a :href="tab.href" @click="selectTab(tab)">{{ tab.name }}</a> </li> </ul> </div> <div class="tabs-details"> <slot></slot> </div> </div> </template> <script> export default { name: "Tabs", data() { return {tabs: [] }; }, created() { }, methods: { selectTab(selectedTab) { this.tabs.forEach(tab => { tab.isActive = (tab.name == selectedTab.name); }); } } } </script> <style scoped> </style> 标签.vue <template> <div v-show="isActive"><slot></slot></div> </template> <script> export default { name: "Tab", props: { name: { required: true }, selected: { default: false} }, data() { return { isActive: false }; }, computed: { href() { return '#' + this.name.toLowerCase().replace(/ /g, '-'); } }, mounted() { this.isActive = this.selected; }, created() { this.$parent.tabs.push(this); }, } </script> <style scoped> </style> 应用程序.js <template> <Tabs> <Tab :selected="true" :name="'a'"> aa </Tab> <Tab :name="'b'"> bb </Tab> <Tab :name="'c'"> cc </Tab> </Tabs> <template/> 我扫描子元素的解决方案(在对 vue 代码进行大量筛选之后)是这样的。 export function findChildren(parent, matcher) { const found = []; const root = parent.$.subTree; walk(root, child => { if (!matcher || matcher.test(child.$options.name)) { found.push(child); } }); return found; } function walk(vnode, cb) { if (!vnode) return; if (vnode.component) { const proxy = vnode.component.proxy; if (proxy) cb(vnode.component.proxy); walk(vnode.component.subTree, cb); } else if (vnode.shapeFlag & 16) { const vnodes = vnode.children; for (let i = 0; i < vnodes.length; i++) { walk(vnodes[i], cb); } } } 这将返回子组件。我对此的用途是我有一些通用的对话框处理代码,用于搜索子表单元素组件以咨询其有效性状态。 const found = findChildren(this, /^(OSelect|OInput|OInputitems)$/); const invalid = found.filter(input => !input.checkHtml5Validity()); 如果你复制粘贴与我相同的代码 然后只需向“选项卡”组件添加一个创建的方法,该方法将自身添加到其父级的选项卡数组中 created() { this.$parent.tabs.push(this); }, 使用脚本设置语法,您可以使用useSlots:https://vuejs.org/api/sfc-script-setup.html#useslots-useattrs <script setup> import { useSlots, ref, computed } from 'vue'; const props = defineProps({ perPage: { type: Number, required: true, }, }); const slots = useSlots(); const amountToShow = ref(props.perPage); const totalChildrenCount = computed(() => slots.default()[0].children.length); const childrenToShow = computed(() => slots.default()[0].children.slice(0, amountToShow.value)); </script> <template> <component :is="child" v-for="(child, index) in childrenToShow" :key="`show-more-${child.key}-${index}`" ></component> </template> 我对 Ingrid Oberbüchler 的组件做了一个小改进,因为它不支持热重载/动态选项卡。 在 Tab.vue 中: onBeforeMount(() => { // ... }) onBeforeUnmount(() => { tabs.count-- }) 在 Tabs.vue 中: const selectTab = // ... // ... watch( () => state.count, () => { if (slots.default) { state.tabs = slots.default().filter((child) => child.type.name === "Tab") } } ) 我也遇到了同样的问题,在做了很多研究并问自己为什么他们删除了$children之后,我发现他们创建了一个更好、更优雅的替代方案。 这是关于动态组件的。 (<component: is =" currentTabComponent "> </component>). 我在这里找到的信息: https://v3.vuejs.org/guide/component-basics.html#dynamic-components 希望这对你有用,向大家问好!! 我发现这个更新的 Vue3 教程使用 Vue 插槽构建可重用的选项卡组件对于与我相关的解释非常有帮助。 它使用 ref、provide 和ject 来替换我遇到同样问题的this.tabs = this.$children;。 我一直在遵循我最初发现的构建选项卡组件(Vue2)的教程的早期版本创建您自己的可重用 Vue 选项卡组件。 根据 Vue 文档,假设您在 Tabs 组件下有一个默认插槽,您可以直接在模板中访问该插槽的子级,如下所示: // Tabs component <template> <div v-if="$slots && $slots.default && $slots.default()[0]" class="tabs-container"> <button v-for="(tab, index) in getTabs($slots.default()[0].children)" :key="index" :class="{ active: modelValue === index }" @click="$emit('update:model-value', index)" > <span> {{ tab.props.title }} </span> </button> </div> <slot></slot> </template> <script setup> defineProps({ modelValue: Number }) defineEmits(['update:model-value']) const getTabs = tabs => { if (Array.isArray(tabs)) { return tabs.filter(tab => tab.type.name === 'Tab') } else { return [] } </script> <style> ... </style> 并且 Tab 组件可能类似于: // Tab component <template> <div v-show="active"> <slot></slot> </div> </template> <script> export default { name: 'Tab' } </script> <script setup> defineProps({ active: Boolean, title: String }) </script> 实现应类似于以下内容(考虑一组对象,每个部分一个,带有 title 和 component): ... <tabs v-model="active"> <tab v-for="(section, index) in sections" :key="index" :title="section.title" :active="index === active" > <component :is="section.component" ></component> </app-tab> </app-tabs> ... <script setup> import { ref } from 'vue' const active = ref(0) </script> 另一种方法是使用 useSlots,如 Vue 文档(上面的链接)中所述。 在 3.x 中,$children 属性已被删除并且不再受支持。相反,如果您需要访问子组件实例,他们建议使用 $refs。作为数组 https://v3-migration.vuejs.org/writing-changes/children.html#_2-x-syntax 在 3.x 版本中,$children 已被删除且不再受支持。使用 ref 访问子实例。 <script setup> import { ref, onMounted } from 'vue' import ChildComponent from './ChildComponent .vue' const child = ref(null) onMounted(() => { console.log(child.value) // log an instance of <Child /> }) </script> <template> <ChildComponent ref="child" /> </template> 详细信息:https://vuejs.org/guide/essentials/template-refs.html#template-refs 基于@Urkle的回答: /** * walks a node down * @param vnode * @param cb */ export function walk(vnode, cb) { if (!vnode) return; if (vnode.component) { const proxy = vnode.component.proxy; if (proxy) cb(vnode.component.proxy); walk(vnode.component.subTree, cb); } else if (vnode.shapeFlag & 16) { const vnodes = vnode.children; for (let i = 0; i < vnodes.length; i++) { walk(vnodes[i], cb); } } } 除了已接受的答案之外: 而不是 this.$root.$children.forEach(component => {}) 写 walk(this.$root, component => {}) 这就是我让它为我工作的方式。
我创建了一个“自定义”主题(使用 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 前端。 我想使用由我正在合作的团队创建的组件,该组件用于在表单中创建输入文本。 该组件的 .html...
当element在element上使用迭代变量时如何重构ngFor?
我有这个 {{ dt }} 我想重构为 Angular v17
我在 Angular 项目中面临一个问题,其中选项表单中有多个复选框。问题是有时复选框中的更改无法正确反映。这是相关内容...
在 Angular 中,位置是“应用程序可以用来与浏览器 URL 交互的服务”。 它提供了一个 getState() 方法,该方法提供“位置历史记录的当前状态&
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=...
我正在开发一个使用 Angular 15 的 Excel 插件,在 Angular 应用程序中,我刚刚添加了 @ngrx/store。我也将开发工具添加到了模块中。我注意到 Excel 使用 Edge 来运行该加载项。
如何在 Angular Material 2 中构建自定义组件
是否有任何标准方法可以在 Angular Material 2 之上构建自己的组件或扩展现有组件。 之前我使用过 Sencha/ExtJS 框架,构建自己的框架非常简单
在一个项目中,我安装了 SSR 的 Angular Universal,并使用 Firebase 托管和功能进行部署。 对于静态文本和图像资源,我在生产中获取了用于 SEO 的内容,但是对于...
我正在 Angular 中用 karma 编写单元测试,但我正在努力解决奇怪的问题。我正在尝试测试 source-roll-history.dialog.ts 内部的 app-source-roll-history-form 的输出取消....
我正在使用 Angular 和 Material 创建一个 Web 应用程序,我希望能够拖放和调整我的部分的大小。有没有办法使用 Angular Material 拖放 CDK 来完成?
将 Angular Material 从 16 迁移到 17 时出现目录错误
我正在尝试运行 Angular Material 迁移工具以从 16 迁移到 17,但收到一条错误消息,指出目录必须是字符串。 JSON 显示它是错误的。这不是提示,a...
在 Angular 15 升级中遇到加载器解析 ag-grid/angular.css 文件的问题
我在将 Angular 14 升级到 15 时遇到此构建错误。 我尝试添加 css 加载器,但没有用 ./node_modules/@ag-grid-community/styles/ag-grid.css?ngGlobalStyle:1:0 - 错误:模块解析失败...
我的表单组结构如下所示(order.component.ts): this.orderForm = this.formBuilder.group({ 客户:this.formBuilder.group({ 名称:['',验证器.required], 电话: ['',
如何在 Angular 16 应用程序中监听 javascript 回调
我正在尝试使用 iFrame 将我的 Angular 16 应用程序与第三方网站集成。我的问题是如何捕获来自他们网站的回调响应? 与其 API 集成的建议方法...
我已经在 Jenkins 中为 Angular 应用程序创建了构建阶段,该阶段是成功的。我的要求是我需要将它部署到我随身携带的 Linux 服务器上,并且应用程序应该得到
如何在不使用 iframe 的情况下使用 Angular 为 chromeextension 创建侧边栏
我正在使用 Angular 开发 chrome 扩展,我的扩展与 MaxAI chrome 扩展类似,当用户单击小部件时,它会打开侧边栏。 我尝试了一些教程来创建...
背景信息 我正在使用 Angular 制作一个抽认卡网络应用程序,但在让抽认卡滑入和滑出视图时遇到一些困难。该应用程序允许用户通过输入添加抽认卡...