标签: ng-zorro-antd

有没有人有在带有 SCSS 样式的 Angular 项目中设置 Ant Design 的经验？设置不是困难的部分，但我试图覆盖 Ant Design 在其设计系统中公开的变量。问题是他们使用.less文件进行样式设置，我不确定如何将其与scss.

我看过一些 React 项目的例子。但是 angular 会产生一些其他问题，因为它本身处理 scss 文件，我不确定如何解决它。

我使用 Angular CLI 创建了这个项目。

这是一些代码：

angular.json 文件

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "ant-design-poc": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {  
              "path": "./src/custom-webpack-2.config.js"  
            },
            "outputPath": "dist/ant-design-poc",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss",
              "node_modules/ng-zorro-antd/ng-zorro-antd.less" …

如标题所述，NG-ZORRO 的部分图标无法渲染。

预计会渲染 5 个图标，但实际只渲染了 2 个。

查看附加的输出

main.component.html

<nz-layout class="full-screen">
    <nz-sider nzCollapsible
              [(nzCollapsed)]="isCollapsed"
              [nzWidth]="260">
        <app-left-control></app-left-control>
    </nz-sider>
    <nz-content class="container">
        <i nz-icon nzType="step-backward" nzTheme="outline"></i> Cannot render<br>
        <i nz-icon nzType="down" nzTheme="outline"></i> Can render<br>
        <i nz-icon nzType="caret-left" nzTheme="outline"></i> Cannot render<br>
        <i nz-icon nzType="double-right" nzTheme="outline"></i> Can render<br>
        <i nz-icon nzType="setting" nzTheme="outline"></i> Cannot render<br>
    </nz-content>
</nz-layout>

主模块.ts

<nz-layout class="full-screen">
    <nz-sider nzCollapsible
              [(nzCollapsed)]="isCollapsed"
              [nzWidth]="260">
        <app-left-control></app-left-control>
    </nz-sider>
    <nz-content class="container">
        <i nz-icon nzType="step-backward" nzTheme="outline"></i> Cannot render<br>
        <i nz-icon nzType="down" nzTheme="outline"></i> Can render<br>
        <i nz-icon nzType="caret-left" nzTheme="outline"></i> Cannot render<br> …

我正在处理与用户相关的信息（创建、删除和编辑），因为我使用相同的反应式 formGroup。当前的功能之一与编辑用户信息有关，一旦用户单击编辑，就会出现一个模态框，其中包含该特定用户的所有信息，除了与角色相关的值之外，这些值是一个列表。我不知道为什么用户没有选择用户默认带来的值，也就是说选项显示与角色相关的所有选项，但不显示与该特定用户相关的选项；在这种情况下， select ng-fox 用于执行此过程。如果有人可以帮助我理解我的代码中的错误是什么，我将非常感激。多谢。

这是我的代码

<nz-select nzMode="multiple" nzPlaceHolder="Inserted are removed" formControlName="role">
<nz-option *ngFor="let roles of this.userMngmtService.getListRoles()" [nzLabel]="roles.name"
 [nzValue]="roles"></nz-option>

Ts 代码：我发送整个用户信息，并且必须进行搜索以将 roleUser_id 与 role_id 匹配，因为它们“不同”，但这部分工作正常。

editUser(user) {
    this.isVisible = true;
    this.tempRoles = [];
    for (let i = 0; i < user.listUserRoles.length; i++) {
      this.tempRoles.push(user.listUserRoles[i].aptRoleEntity);
    }
    console.log('userToEdit', user);
    console.log('userRName', this.tempRoles);
    // Manage the status (Edit) of the modal
    this.userEditEmailEnable = false;
    this.userEdit = true;
    this.idUserEdit = user.user_id;
    this.editForm.patchValue({
      name: user.name,
      email: user.email,
      password: user.password,
      role: this.tempRoles,
    });
    // <label *ngFor="let role …

我有以下问题，我正在使用 ng-zorro-antd 做应用程序，现在我想做 2 个组件，一个负责登录，另一个负责注册。不幸的是，问题是创建这些组件后，如何在路由/登录或/注册之后进行，然后这两个组件使用主模板，例如我有一个侧边栏。我怎样才能让他们不使用任何模板？我希望登录和注册仅显示登录和注册表单。

我在许多模板中看到，作为 BlankComponent 的一部分编写并且它可以工作，不幸的是它对我不起作用。

我的路线：

const routes: Routes = [\n  {\n    path: \'\',\n    component: DashboardComponent\n  },\n  {\n    path: \'login\',\n    component: LoginComponent\n  }\n];\n

现在，当我编写 BlankComponent 时，出于明显的原因，它表明不存在这样的组件，如果我输入路径本身，它也将不起作用，因为它不会给出应该加载什么组件。如果我输入LoginComponent，它会加载LoginComponent给我，但是这样我会加载共享的侧边栏，我想得到这样的效果：进入路由寄存器后我会看到相同的内容RegisterComponent，没有侧边栏等. 与共享。

我的应用程序组件：

<nz-layout>\n  <nz-sider [nzBreakpoint]="\'lg\'" [nzZeroTrigger]="zeroTrigger" nzCollapsible [(nzCollapsed)]="isCollapsed" [nzTrigger]="triggerTemplate"\n    [nzWidth]="250" style="background-color: #000;">\n    <div class="logo">\n      <img src="../assets/logo.png" class="logo-img" />\n    </div>\n    <ul nz-menu [nzTheme]="\'dark\'" [nzMode]="\'inline\'" [nzInlineCollapsed]="isCollapsed">\n      <li nz-submenu>\n        <span title><i nz-icon type="money-collect" theme="outline"></i><span class="nav-text">Ksi\xc4\x99gowo\xc5\x9b\xc4\x87</span></span>\n        <ul>\n          <li nz-menu-item><i nz-icon type="right-circle" theme="outline"></i> Lista u\xc5\xbcytkownik\xc3\xb3w</li>\n          <li nz-menu-item><i nz-icon type="right-circle" theme="outline"></i> …

使用可调整大小的组件调整列大小时，如何防止在表列上触发排序？当 mouseup 事件发生在正在调整大小的 th 上时，它会触发排序。我试图在 nzResizeEnd 事件中阻止它，但我想那已经太晚了。有人能帮助我吗？示例https://stackblitz.com/edit/angular-jqs53u?embed=1&file=src/app/app.component.ts

去图书馆存储库提交问题，11 天前就已经有人提交了。让我们希望能够快速修复。https://github.com/NG-ZORRO/ng-zorro-antd/issues/5199

每个人，

如何使用 ant design (NG-Zorro) 轮播在每页显示多个项目。 https://ng.ant.design/components/carousel/en

我想展示这样的东西 - 多个项目

https://ng.ant.design/components/carousel/en

我们在 Angular 10 项目中使用 ngZorro。现在我想打开抽屉（https://ng.ant.design/components/drawer/en）来显示表单。该场景是例如产品的列表，单击其中一个产品时，应在抽屉中打开它的表单。

我使用 NzDrawerService 创建抽屉，但无法设置任何页脚（称为 nzFooter）。

例如，有一个 ProductFormComponent，因此在我的 ProductService.ts 中我可以调用：

openForm(){
  const drawerRef = this.drawerService.create({
      nzTitle: 'My Title',
      nzContent: ProductFormComponent
  });
  drawerRef.open()
}

现在，还有一个预定义页脚 ( nzFooter?: string | TemplateRef<{}>) 的选项，我想在其中添加保存和取消按钮。现在的问题是：我如何在这里获取 TemplateRef，因为该函数是在服务中而不是在组件中调用的？

我正在为 angular 6 应用程序使用 NG_ZORRO 蚂蚁设计。我创建了一个组件来使用 nz-upload 上传图像。现在我想使用上传图像的自定义请求，该请求包含上传图像的操作和请求标头。

我有一个特定的问题，例如：

我不喜欢 ng-zorro 表上的边距。在我的浏览器中，我可以看到它从.ant-table-small>.ant-table-content>.ant-table-body选择器中获得了边距。

有什么方法可以覆盖它吗？

它在 ng-zorro theme.less 中不存在。对于这个菜鸟问题，我感到非常抱歉。

请找到 ng-zorro 链接以供参考。 https://ng.ant.design/components/carousel/en#header

我做了很多研究，但找不到生成 ng-zorro 主题并在运行时更改它的方法。

最后，我找到了一种方法来做到这一点。

这是我的 HTML：

<nz-form-item nzFlex [formGroup]="hulkForm">
   <nz-form-label [nzSpan]="7" [nzFor]="hulkColumn.column" 
        [nzRequired]="hulkColumn.require">{{hulkColumn.lable}}</nz-form-label>
   <nz-form-control [nzSpan]="17">
   <input nz-input 
       placeholder={{hulkColumn.placeholder}} 
       [formControlName]="hulkColumn.name"
       [(ngModel)]="hulkColumn.model"
     [ngModelOptions]="{updateOn: 'blur'}"
     name="{{hulkColumn.name}}"
        *ngIf="hulkColumn.type!=='number'"
       >
 </nz-form-control>
</nz-form-item>

这是Chrome中的错误：

这是 app.module.ts：

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {HashLocationStrategy, LocationStrategy} from '@angular/common';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {HttpClientModule} from '@angular/common/http';
import {NgZorroAntdModule, NZ_I18N, zh_CN} from 'ng-zorro-antd';
import {registerLocaleData} from '@angular/common';
import zh from '@angular/common/locales/zh';

import {AppRoutingModule} from './app-routing.module';
import {AppComponent} from './app.component';


registerLocaleData(zh);

@NgModule({
  declarations: [
  AppComponent,
  ... …