小编Kay*_*Kay的帖子

如何创建具有浮动工具栏和卡片布局的工具栏,如下图所示.

https://storage.googleapis.com/material-design/publish/material_v_12/assets/0Bx4BSt6jniD7bW1TYXlMT0JxUWM/layout-structure-toolbars4.png

这是从官方材料网站上获取的.

<div id="profile-edit">
  <mat-toolbar color="primary">
    <span>Outer Toolbar</span>

    <mat-toolbar-row>
    </mat-toolbar-row>

    <mat-toolbar-row>
    </mat-toolbar-row>
  </mat-toolbar>
  <mat-card class="example-card">
    <mat-toolbar>
      <span>Inner Card Toolbar</span>
    </mat-toolbar>
  </mat-card>
</div>

这就是我到目前为止我创建的1个外部工具栏,其中包含2行以增加高度.

我不知道如何浮动页面的卡片中心和工具栏的中心.

我相信这个问题与关键字“this”没有分配给我假设的内容有关。

我正在使用 Angular 5 和 WordCloud 包。https://github.com/timdream/wordcloud2.js/blob/gh-pages/API.md

有一个单击回调函数，它返回在回调中单击的单词的单个字符串。当用户点击这个词时，我需要它来调用另一个函数并显示一个模态。

组件.ts

import { Component, OnInit, Input } from '@angular/core';
const WordCloud = require('wordcloud');

import { MatDialog, MAT_DIALOG_DATA } from '@angular/material';
import { TopWordsModalComponent } from './top-words-modal/top-words-modal.component';

@Component({
    selector: 'app-top-words',
    templateUrl: './top-words.component.html',
    styleUrls: ['./top-words.component.scss']
})

export class TopWordsComponent implements OnInit {

    @Input() report;
    categories: any = null;
    filterForm: FormGroup;

    constructor(private fb: FormBuilder, public modal: MatDialog) {

    }

    ngOnInit() {

        const all_words = this.report.activity.top_words;

        this.generateWordCloud(all_words);

    }

    generateWordCloud(words) {

        WordCloud(document.getElementById('word_cloud'), {

            list: words,
            click: …

我有一个使用 react material ui 的 react 应用程序，我使用的是自动完成react-select示例，您可以在此处找到。

https://material-ui.com/components/autocomplete/

当SELECT中的项目数量大时，例如左右2500左右〜它滞后并变得无法使用。

我修改了原始演示以提出长度为 2500 的建议来填充选择。

const suggestions = [];
for (let i = 0; i < 2500; i = i + 1) {
  suggestions.push({ value: i, label: `Option ${i}` });
}

请参阅我的问题的以下演示示例。

https://codesandbox.io/s/material-demo-vp59j

当您单击第一个选择器时，它非常滞后。

我有一个客户端 javascript sdk，它将图像提交到服务器端 node.js api，该 API 使用 multer 库来解析图像。

但是我注意到如果我将标头设置为content-type multipart-formdatamulter 会抛出错误

错误：多部分：未找到边界

async submitDocument(id, side, image) {

        const url = this.API_URL + "/api/document";

        let formData = new FormData();
        formData.set("image", image, "front.jpg");
        formData.set("side", side);

        let headers = new Headers();
        headers.set("content-type", "multipart/form-data");
        headers.set("Authorization", "Bearer " + this.API_KEY);

        const request = {
            method: "POST",
            body: formData,
            headers: headers,
        };

        try {

            const response = await fetch(url, request);
            const data = await response.json();

            return data;

        } catch (err) {
            throw err; …

我有一个产品列表，对于每个产品，我都会调用 api 来获取产品订阅。

   const subscriptions = await Promise.all(products.flatMap((p: any) => {
        const { username, password } = p.credentials;
        return GetSubscription(username, password);
    }));
    console.log(subscriptions);

实际的：

[ [ {}, {}, {}, ] ]

现在你可以看到我这里有一个双重嵌套数组，我不需要外部数组，我怎样才能展平这个数组，我假设在这里使用 flatMap 可能对我有帮助，但事实并非如此。

预期的：

[ {}、{}、{}、]

当然，我可以简单地这样做subscriptions[0]，但如果可能的话，我会尽量避免这种情况。

我有一个实体“List”，我想通过将对象传入构造函数来创建一个新列表。

列表.ts

import {Entity, PrimaryColumn, Column, CreateDateColumn, UpdateDateColumn, DeleteDateColumn } from "typeorm";

@Entity()
export class List {

    @PrimaryColumn()
    id: string;

    @Column({type: "varchar", nullable: true})
    dtype: string;

    @Column({type: "varchar", nullable: true})
    title: string;

    @Column({type: "varchar"})
    user_id: string;

    @Column({type: "varchar", nullable: true})
    brand_id: string;

    @CreateDateColumn({type: "timestamp", nullable: true})
    created_at: string;

    @UpdateDateColumn({type: "timestamp", nullable: true})
    updated_at: string;

    @DeleteDateColumn({type: "timestamp", nullable: true})
    deleted_at: string;

}

列表测试

import "reflect-metadata";
import {createConnection, getRepository} from "typeorm";
import {List} from "./../../src/entity/lists/List";

describe("List", () => {

    let connection
    beforeAll( …

我有一个 github 管道，并将 github sercret 变量通过管道传输到文件中，但出现以下错误。

/home/runner/work/_temp/c6144b9a-c8e3-489a-ae97-795f592c57f0.sh: line 6: /config: Permission denied
echo: write error: Broken pipe

name: pipeline

on: [ push ]

env:

  KUBECONFIG_B64DATA: ${{ secrets.KUBECONFIG_B64DATA }}

  deploy:
    name: Deploy
    # if: startsWith(github.ref, 'refs/tags/')
    runs-on: ubuntu-latest
    steps:
    - name: Checkout
      uses: actions/checkout@master

    - name: Setup Kubectl
      run: |
        sudo apt-get -y install curl
        curl -LO https://storage.googleapis.com/kubernetes-release/release/`curl -s https://storage.googleapis.com/kubernetes-release/release/stable.txt`/bin/linux/amd64/kubectl
        chmod +x ./kubectl
        sudo mv ./kubectl /usr/local/bin/kubectl
        sudo echo $KUBECONFIG_B64DATA | base64 --decode > /config
        sudo mkdir -p ~/.kube
        sudo mv …

我会短暂轮询端点，直到一些数据准备就绪为止，我想重试该请求最多 10 次。

当数据未准备好时，我收到带有空数组的 200。

当数据准备好时，我收到一个带有非空数组的 200 。

我使用以下库 https://github.com/axios/axios https://github.com/softonic/axios-retry

 try {

   const axiosInstance = axios.create();

   axiosInstance.interceptors.response.use((response) => {

     if (response.data.metrics.length === 0) {
       const error = new Error("Metrics Not Ready");
       return Promise.reject(error);

     }
     return response;
   }, (error) => {
     return Promise.reject(error);
   });

   axiosRetry(axiosInstance, {
     retries: 10,
     retryCondition: (error) => {
       console.log("RETRY CONDITION", error);
     },
   });

   const metrics = await axiosInstance(options);

 } catch (error) {
   console.log(error);
 }

我创建了一个 axios 拦截器来检查数组的长度，如果它是 0 我会抛出错误。然而，这并没有被 axiosRetry 捕获，此时我想重试该请求。相反，它被捕获在 try catch 块中并结束。

我需要将输入图像（blob）转换为 base64 图像。我知道尺寸会增加大约 1.37。

然而，我注意到，firereader.readAsDataUrl与 macOS 上内置的 base64 命令行工具相比，使用图像的尺寸非常大。

https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL

重现步骤：

1. 下载此免费示例图像https://wall.alphacoders.com/big.php?i=685897请务必单击“下载”按钮（下载原始 8000x600）。不要使用右键另存为，因为图像会被压缩

2. 使用 jsfiddle 选择上面下载的镜像，并检查控制台日志中是否有 64 进制的大小。https://jsfiddle.net/b7nkw8j9/可以看到大小为11.2mb。

3. 现在，如果您在 Mac 上使用 Base64 命令行工具将上面下载的图像转换为 Base64 并检查文件大小。您将在这里看到 base64 大小。5.9MB。base64 -w 0 downloaded_image.jpg > downloaded_image.base64

这是我在代码中使用的将输入文件图像转换为 Base64 的函数。

async convertToBase64(file) {

  if (file === undefined) {
    throw new Error("File could not be found");
  }

  const fileReader = new FileReader();

  return new Promise((resolve, reject) => {
    fileReader.readAsDataURL(file);

    fileReader.onerror = (error) => {
      reject("Input: …

试图以相同的间距在同一行上获得多个div.所以它们非常适合整个容器.

这是我到目前为止所得到的.试图在所有方框中设置左右边距等于相同,但是使其平均仍然很棘手,有时候最后一个方框将会换行.

HTML

     <div id="serviceBox"> 
    <div class="serviceBox1">
        <h2> Heading 1</h2>
        <p>Information</p>
    </div>
     <div class="serviceBox2">
        <h2>Heading 2</h2>
        <p> Information</p>
    </div>
    <div class="serviceBox3">
        <h2>Heading 3</h2>
        <p>Information</p>
     </div>
    <div class="serviceBox4">
        <h2>Heading 4</h2>
        <p>Information</p>
     </div>
 </div>

CSS

#serviceBox
{
    width:100%;
    margin: 0 auto;
    margin-top:75px;
    height:250px;
    border:1px solid black;
}
.serviceBox1, .serviceBox2, .serviceBox3, .serviceBox4 {
    float:left;
    width:20%;
    height: 250px;
    background-color: white;
    border: 1px solid #bdbdbd;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0 0 10px #bdbdbd;
    -webkit-box-shadow: 0 0 10px #bdbdbd;
    box-shadow: 0 0 10px #bdbdbd;
} …

我有一个输入来上传图像。

html

<main>
    <input id="hs-p" type="file" accept="image/*" capture="camera">
</main>

<script type="text/javascript">
    let hsp = new HPS();
</script>

我想监听此输入何时更改（当有人向其中添加图像时）。

js

let imageInput = null;

class HSP {       
    constructor() {

        this.imageInput = document.getElementById('hs-p');

        if (this.imageInput) {
            this.imageInput.addEventListener("change", this.uploadImage());
        }
   }

    uploadImage() {
        console.log("upload image", this.imageInput);
    }
}

module.exports = HSP;

当有人添加图像时，它应该调用 uploadImage 回调。但是，此功能仅在页面加载时触发一次，而在我向输入添加图像或更改输入图像时从不触发。

我正在使用 node & webpack 输出上面的自定义库/sdk，然后我将其导入到我的 html 中。

我在 docker 容器中启动并运行了 mongodb。我停止容器，节点返回 MongoError。我重新启动容器，节点继续抛出相同的 MongoError。

我希望它在出现问题时重新连接。

    const uri: string = this.config.db.uri;
    const options = {
            useNewUrlParser: true,
            useCreateIndex: true,
            autoIndex: true,
            autoReconnect: true,
    },

    mongoose.connect(uri, options).then(
        () => {
            this.log.info("MongoDB Successfully Connected On: " + this.config.db.uri);
        },
        (err: any) => {
            this.log.error("MongoDB Error:", err);
            this.log.info("%s MongoDB connection error. Please make sure MongoDB is running.");
            throw err;
        },

    );

当 mongodb 连接失败时，我如何设置 mongoose 以尝试自动连接。