小编Laz*_*lic的帖子

当具有 NULL 值时，我在生成查询以将 JSON 数组显示为一组文本值时遇到问题。假设我有下表：

Name | Meta
Art0 | {"category":["sport"]}
Art1 | [NULL]
Art2 | {"category":["sport", "health"]}

如果我做类似的事情：

SELECT name, jsonb_array_elements_text(meta->'category') tag FROM table

我得到以下结果：

Name | Tag
Art0 | sport
Art2 | sport
Art2 | health

问题是 Art1 正在被删除。如何执行还包含 Art1 行以及 Tag 列上的空字符串或 NULL 值的查询？

谢谢

我用 react-semantic-ui 创建了卡片，我想通过 css 类添加一些额外的样式。

一个例子是：

我添加了带有 box-shadow 属性的自定义“卡片”类，但未应用该样式。

          HTML PART:

import './App.css';


          {/* CLAIM CARDS SECTION */}

                  <Card className='card'>
                    <Card.Content>
                      <Card.Header style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>       
                        <h4>
                          Church Mutual Worker's Compensation Claim 
                          <span style={{marginLeft: '130px'}}>Claim #1234567</span>
                        </h4>
                      </Card.Header>
                    </Card.Content>
                  </Card>

CSS 代码部分：App.css

 .header-height {
      height: 12rem;
    }

    .header-title-color {
      color: black;
      font-weight: bold;
    }

    .card {
      box-shadow: 2px 2px 2px 2px grey;
      width: 100%;
    }

    .red {
      color: red;
    }

有人有解决方案如何将自定义 css 类添加到 React-semantic-ui 组件吗？

谢谢

由于这被标记为重复，让我澄清一下我的问题不是我收到Uncaught TypeError: d3.schemeCategory20错误，就像实际上建议的帖子，如果您查看我的代码并且我正在拨打电话与接受的答案相同的方式。如果阅读我的问题，我的图表是填充颜色全黑，我的问题是该d3.schemeCategory20c数组似乎根本没有被调用。我没有错误，但该方法有意外的输出。

我正在阅读Barrett Clark的《数据可视化工具包》一书的第一章。我已经更新了代码以反映 d3 v4中的更改，但我的饼图以一种颜色呈现，这是我的scaleOrdinal 分配

var color = d3.scaleOrdinal(d3.schemeCategory20c);

这是 json 调用：

$.getJSON('/residential/data', function(data) {
    totals = data.totals;
    var g = svg.selectAll('.arc').data(pie(d3.keys(totals))).enter()
      .append('g').attr('class', 'arc');

    g.append('path').attr('d', arc).style('fill', function(d) { return color(d.data); });

    g.append('text').attr('transform',
      function(d) { return 'translate('+ arc.centroid(d) +')'; }).attr('dy', '.35em')
      .style('text-anchor', 'middle').text(function(d) { return d.data; });
  });

这呈现了一个很棒的饼图，每个切片都填充为黑色，我尝试阅读文档，但似乎找不到这个实现。我从其他人那里了解到这应该有效，但事实并非如此。

我正在尝试在 Nuxt 应用程序中关闭 webpack-hot-middleware 的覆盖。

我尝试编辑 nuxt.config.js 中的配置，但覆盖仍然存在。

  build: {
    // turn off client overlay when errors are present
    hotMiddleware: {
      overlay: false
    },
    /*
    ** You can extend webpack config here
    */
    extend(config, ctx) {
      // Run ESLint on save
      if (ctx.isDev && ctx.isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        });
      }
    }
  }

我有一个Angular应用程序.它的HTML文件包含一个div带有类的行,它本身包含两个div带有类的s col.通过单击按钮,列的大小会发生变化:

<button class="btn btn-primay" (click)="changeColumnsSize()"> change column sizes</button>
      <div class="row">
        <div id="leftColumn" class="col-sm-{{leftColumnSize}}" style="background-color:lavender;">
          .col-sm-8     
        </div>
        <div id ="rightColumn" *ngIf="this.state===true" class="col-sm-{{rightColumnSize}}" style="background-color:lavenderblush;">
          .col-sm-4
        </div>
      </div>

为了平滑调整大小,我将过渡属性添加到CSS文件中的col类:

.col-sm-8 { transition: width .5s ease; }

.col-sm-4 { transition: width .5s ease ; }

该TS文件(包含changeColumnsSize函数)看起来是这样的:

export class BoxComponent {
  leftColumnSize: number = 12;
  rightColumnSize: number = 0;
  colDifference: number = 4;
  state: boolean = false;

  constructor() { …

我正在使用 Semantic-ui-react 来设计和显示一些组件，但我陷入了以下问题。通常，我使用反引号和美元符号在链接或 HTTP 地址中使用我的变量的核心值，但是当我尝试在 Item 组件上使用它时，它不起作用。它只接受简单或双引号。任何想法我怎么能做到这一点？每次用户按下新按钮时，我都需要动态更改 Image 的 src。

 <Item.Image src=`http://...../${this.state.card}`/>

我正在尝试创建一个具有水平和垂直以及粘性标题和第一列的网格。

我用它来使标题粘住

 .thead {
     position: sticky;
     top: 0px;
 }

我用它来使第一列具有粘性。

 div.tbody>div.tr>div:nth-child(1) {
    position: sticky;
    left: 0;
}
.thead>div>div:nth-child(1){
    left:0;
    top:0;
    position: sticky;
}

但我得到了一个奇怪的滚动行为，即第一列标题粘在左侧而不是顶部。

这是我使用的代码。我怎样才能让它工作，以便第一个列标题将同时粘在左侧和顶部？

 .thead {
     position: sticky;
     top: 0px;
 }

 div.tbody>div.tr>div:nth-child(1) {
    position: sticky;
    left: 0;
}
.thead>div>div:nth-child(1){
    left:0;
    top:0;
    position: sticky;
}

嗨，当用户在输入框中输入手机号码时，需要屏蔽手机号码，此格式应为 021 121 4544。意味着应该有 021{auto space}121{auto space}4544 我怎样才能建立反应这个功能？

class NumberCheck extends Component {
    state = {
        disabled: true,
        errorBlock: 'none',
        mobileNumber: '',
        error: ''
    };

handleOnChange = (event) => {
    let disabled = event.target.value ? disabled = false : disabled = true;
    this.setState({
        disabled: disabled,
        mobileNumber: event.target.value
    })
}

submit = (e) => {
    e.preventDefault();
    if (this.state.mobileNumber.match(/^02[0-9]{6,11}$/)) {
        this.setState({
            errorBlock: 'none'
        })
        const payload = {
            msisdn: this.state.mobileNumber
        }
        this.props.checkNumber(payload);
    } else {
        this.setState({
            error: ' Please enter valid mobile …

使用multiselectwith时出现此错误final-form。

设置value时下拉菜单必须是一个数组multiple。接收类型：[object String]

这是我的代码：

https://codesandbox.io/s/cool-torvalds-lhe9d

<Dropdown
        {...props.input}
        clearable
        fluid
        multiple
        search
        onChange={(e, data) => {
          return data.value.length > 0
            ? input.onChange(data.value)
            : input.onChange("");
        }}
        onSearchChange={onSearchChange}
        selection
        defaultValue={[]}
        options={data}
        placeholder="Select values"
      />

任何更新？