小编Kay*_*Kay的帖子

Angular + Material - 如何使用formgroup处理多个复选框

我有一份从后端获得的兴趣列表.我希望用户能够选择他们想要的兴趣.我将仅存储他们在数据库中检查的兴趣,并在加载页面时预先填充.但首先我需要获得用户选择的这些兴趣.

interest.component.ts

export class InterestsComponent implements OnInit {

  interestFormGroup : FormGroup
  interests:any;
  selected: any;


  constructor(public interestService: InterestService, private formBuilder: FormBuilder,
  ) { }

  ngOnInit() {

    this.interestFormGroup = this.formBuilder.group({
      interests: this.formBuilder.array([])
    });


    this.interestService.all().subscribe((res) => {

      this.interests = res;

    });

  }

  change() {
    console.log(this.interestFormGroup.value);
  }

}
Run Code Online (Sandbox Code Playgroud)

interest.component.html

<div id="interest">

    <div class="interest-list">

        <form [formGroup]="interestFormGroup">
            <div *ngFor="let interest of interests" >
                <mat-checkbox class="example-margin" formNameArray="interests" (change)="change()">{{interest}}</mat-checkbox>
            </div>
        </form>

    </div>

</div>
Run Code Online (Sandbox Code Playgroud)

在我更改事件的console.log中,它显示没有值被添加到interestFormGroup中的interests数组.甚至选中复选框.

angular-material angular

13
推荐指数
1
解决办法
2万
查看次数

Angular 6 Auth0 - 全局未定义

我已将我的应用程序从角度5升级到角度6.我现在收到以下错误.

Uncaught ReferenceError: global is not defined
at Object../node_modules/auth0-lock/lib/utils/cdn_utils.js (cdn_utils.js:13)
Run Code Online (Sandbox Code Playgroud)

"angular2-jwt":"^ 0.2.3","auth0-js":"^ 9.5.1","auth0-lock":"^ 11.6.1",

auth0 angular

12
推荐指数
1
解决办法
3201
查看次数

jest.mock 找不到模块

我有一个使用 mysql 连接进行查询的函数,我正在尝试对该函数进行单元测试,为此我需要模拟 mysql。但是,当我使用 jest.mock 函数来模拟 mysql 连接时,它返回以下错误。

无法从“src/api/leaderboard/ranks/popularity.test.ts”找到模块“MySQLReplica”

流行度.test.ts

import { MySQLReplica } from "@services/mysql.service";
import { IEntityLeaderboardQuery } from "./../leaderboard.interface";
import { PopularityRank } from "./popularity";
import { mocked } from "ts-jest/utils";
jest.mock("MySQLReplica");

describe("Leaderboard - Rank - Popularity", () => {
    afterAll(() => {
        MySQLReplica.end();
    });

    const mockedMySQLReplica = mocked(MySQLReplica, true);
    it("should get popularity scores", async () => {
        const query: IEntityLeaderboardQuery = {
            top: "10",
            entity_types: ["person"],
            region: "Europe",
            country: "Germany",
            end_date: "2021-06-15",
            start_date: "2021-06-01",
            rank: "popularity", …
Run Code Online (Sandbox Code Playgroud)

node.js jestjs ts-jest

12
推荐指数
1
解决办法
2万
查看次数

Material UI v5 - 使用自定义主题时,“DefaultTheme”类型上不存在属性“spacing”

我使用的是 Material ui 版本 5,我有一个自定义主题,我已将其包装在所有组件中。

在我的一个组件中,我试图根据我的主题给纸张一些填充,但是我收到以下错误。

“DefaultTheme”类型上不存在属性“spacing”

       <AppProvider>
            <Theme>
                <Layout>
                    <ProtectedRoute>
                        <Component {...pageProps} />
                    </ProtectedRoute>
                </Layout>
            </Theme>
        </AppProvider>
Run Code Online (Sandbox Code Playgroud)

活动.tsx

const useStyles = makeStyles((theme) => ({
    paper: {
        padding: theme.spacing(3),
    },
}));

export default function Campaign(props: ICampaginProps): ReactElement | null {
    const classes = useStyles();
Run Code Online (Sandbox Code Playgroud)

主题.tsx

const DEFAULT_THEME = createTheme({
    typography: {
        fontSize: 12,
    },
    palette: {
        mode: "light",
        primary: {
            main: "#212121",
        },
        secondary: {
            main: "#fafafa",
        },
    },
});
Run Code Online (Sandbox Code Playgroud)

typescript reactjs material-ui

12
推荐指数
1
解决办法
7699
查看次数

Node.js 和 Express - BadRequestError:请求中止

我正在对我创建的 node.js api 进行性能测试。

有一个 POST 端点,它将图像作为 base64 的输入。所以请求负载相当大,我的测试用例图像约为 7-8mb。

当我同时对 10 个用户运行性能测试时,出现以下错误:

要求

{"log_id":"db0ac1d0-cafe-11e9-afec-e91ff7e323e3","level":"info","request":{"method":"POST","path":"<removed>","url":"<api_url_removed>","body":{},"forward_for":"<removed>","content_type":"application/json","content_length":"7687038"},"message":"Received","log_type":"request","timestamp":"2019-08-30 08:19:15"}
Run Code Online (Sandbox Code Playgroud)

错误:

BadRequestError:请求在 IncomingMessage.onAborted (/app/node_modules/raw-body/index.js:231:10) 在 IncomingMessage.emit (events.js:189:13) 在 abortIncoming (_http_server.js:449:9) 处中止在socketOnClose (_http_server.js:442:3) 在Socket.emit (events.js:194:15) 在TCP._handle.close (net.js:600:12)

我可以看到其中 10-20 个请求出现相同的错误。他们都有独特的 ID。显然,由于我正在运行性能测试,所以发出这么多请求是正常的。

我的问题是为什么 node.js/express 抛出这个 BadRequestError 以及我该如何处理它。

应用程序.ts

class App {

    public app: express.Application;
    public config: any;
    public log = Logger;

    constructor() {

        this.app = express();

        this.errors();
        this.environment();
        this.database();
        this.middleware();
        this.routes();

    }

    private environment(): void {

        this.config = new Config();

    }

    private errors(): void { …
Run Code Online (Sandbox Code Playgroud)

node.js express

10
推荐指数
1
解决办法
1万
查看次数

Angular - RxJs ForkJoin 如何在出现错误后继续多个请求

除了使用不同的参数外,我多次查询单个 API 端点。无论出于何种原因,其中一些请求可能会失败并返回 500 错误。如果他们这样做,我仍然希望其他请求继续并返回所有成功请求的数据。

let terms = [];
terms.push(this.category.category);
terms = terms.concat(this.category.interests.map((x) => x.category));

for (let i = 0; i < terms.length; i++) {

    const params = {
        term: terms[i],
        mode: 'ByInterest'
    };


    const request = this.evidenceService.get(this.job.job_id, params).map((res) => res.interactions);

    this.requests.push(request);

}

const combined = Observable.forkJoin(this.requests);

combined.subscribe((res) => {
    this.interactions = res;
});
Run Code Online (Sandbox Code Playgroud)

fork-join rxjs angular

9
推荐指数
2
解决办法
6613
查看次数

角材料 - 手动输入错误地转换日期

我将日期的语言环境设置为 en-GB - 这样日期选择器就可以采用英国格式。

如果我手动输入日期10/12/2018(2018 年 12 月 10 日)并点击选项卡,日期将转换为12/10/2018(12th October 2018) 。

使用选择器选择原始日期工作正常,此问题仅在手动输入和指定区域设置时发生。

https://stackblitz.com/edit/angular-hv6jny

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>
Run Code Online (Sandbox Code Playgroud)

——

  providers: [
    { provide: MAT_DATE_LOCALE, useValue: 'en-GB' },
  ]
Run Code Online (Sandbox Code Playgroud)

这是日期选择器的错误吗?

angular-material angular

9
推荐指数
1
解决办法
3282
查看次数

Angular 5 - 在鼠标输入时显示一个按钮,鼠标离开时隐藏一个按钮

当用户将鼠标悬停在列表项上时,我希望显示一个按钮.当用户离开列表项时,我希望不显示该按钮.

我遇到了一个mouseenter事件和一个mouseleave.

html的

<mat-list-item (mouseenter)="enter($event)" (mouseleave)="leave($event)" class="chat-message-body" *ngIf="auth._id !== message.author._id" fxLayoutAlign=""
    dir="ltl">
    <div matLine>
        <b>{{message.author.profile.username}} </b>
        <span>{{message.created_at | date:'shortTime'}} </span>
    </div>
    <button mat-icon-button>
        <mat-icon aria-label="">keyboard_arrow_down</mat-icon>
    </button>
    <span matLine> {{message.body}} </span>
    <img matListAvatar class="img-box" src="http://via.placeholder.com/30x30" alt="...">
</mat-list-item>
Run Code Online (Sandbox Code Playgroud)

.TS

enter(e) {
    console.log("enter");
}

leave(e) {
    console.log("leave");
}
Run Code Online (Sandbox Code Playgroud)

除了声明这些功能之外,我不知道如何定位此列表项中的按钮以显示和隐藏它,具体取决于用户是否已输入列表项块或向左.

在此输入图像描述

angular-material angular

8
推荐指数
1
解决办法
3万
查看次数

如何将 scss 文件导入打字稿文件

我正在尝试将 .scss 文件导入到 .tsx 打字稿文件中。

但是我收到以下错误。当我跑npm run tsc

src/public/app1/index.tsx:5:20 - 错误 TS2307:找不到模块“./index.scss”。

5 从“./index.scss”导入样式;~~~~~~~~~~~~~~~

发现 1 个错误。

索引.tsx

import React from "react";
import { render } from "react-dom";
import App from "./App";
import styles from "./index.scss";

render(
    <App/>,
    document.getElementById("root"),
);
Run Code Online (Sandbox Code Playgroud)

索引.scss

body {
    background:red;
    color: #005CC5;
    text-align: center;
}
Run Code Online (Sandbox Code Playgroud)

我看到一个解决方案是在我的项目的根目录中创建一个 decleration.d.ts 文件。但这对我没有用。无法导入 CSS/SCSS 模块。TypeScript 说“找不到模块”

declaration.d.ts

declare module '*.scss';
Run Code Online (Sandbox Code Playgroud)

配置文件

{
  "compilerOptions": {
    /* Basic Options */
    // "incremental": true,                   /* Enable incremental compilation */
    "target": "es6",                          /* …
Run Code Online (Sandbox Code Playgroud)

sass typescript reactjs

8
推荐指数
1
解决办法
1万
查看次数

无法在已部署的 emberjs 应用程序上的资源的“完整性”属性中找到有效的摘要

我有一个已部署的 emberjs 应用程序,在 google chrome 浏览器中,我收到 2 个 .js 文件的以下错误。

无法在资源 'http://staging.org.com/assets/vendor-0ada2c9fb4d3e07ad2f0c6a990945270.js' 的 'integrity' 属性中找到有效的摘要,计算出的 SHA-256 完整性为 'Sb4Xc/Oub27QW0MKlq.Mg7mg7s' 资源被屏蔽了

当我检查文件时,我可以看到有问题的两个 .js 文件的脚本标签。我不是 100% 确定这种完整性检查是如何工作的。您可以在下面看到 sha 的完整性属性。

<script src="/assets/vendor-0ada2c9fb4d3e07ad2f0c6a990945270.js" integrity="sha256-s3XY9h9v9IThygF6UkWRvWZsf7zeTqYJ1rLfDgg1bS0= sha512-k3lfqdeZw3OcsECfD3t99Hidh6IoRlFSoIu5nJk0FkLYHwx0q/rddirj4jh4J73dmLwKfG9mx0U5Zf6ZzRBsvA==" ></script>
<script src="/assets/g-web-56670cf0485cf52f54589091e2a25cc8.js" integrity="sha256-jNmWqO61OPijscQ5cHVSbB1Ms5wKX78ZACYdhrUo3X4= sha512-oiksgRFsqgHaCvXPvd3SAsUuX4zPeVClQBIgrOgIKNBMa3hPqCHknoFqDGRtSyfN4EdIkfk/x1zSqBqRvONAGQ==" ></script>
Run Code Online (Sandbox Code Playgroud)

emberjs 应用程序是使用 docker 映像构建的,部署到 kubernetes 并且运行 haproxy 的 aws elb 正在处理该应用程序的路由,以便当我导航到staging.x.com它时,路由到该服务(emberjs web 应用程序)的 kubernetes 中的内部 dns。

有什么值得注意的;

  1. ember serve在本地运行可以正常工作并且应用程序加载正常。
  2. 在本地构建和运行 docker 镜像工作正常,应用程序加载正常。

该问题仅发生在我部署的登台环境中。

javascript haproxy ember.js ember-cli kubernetes

8
推荐指数
2
解决办法
2万
查看次数