小编Joh*_*zle的帖子

我需要在某种后端保存编辑器的一些内容,这些内容目前尚未指定.目前我在努力创建文档的结构.在编辑器中,用户应该能够编写文本并放置视频或图像,而不需要如何放置图像和文本的固定结构.用户应该按照他想要的任何顺序放置这3个组件.

在实践中,编辑器看起来像这样:

问:如何保存结构,下次加载完全相同的编辑器,或者<div>再次使用内容创建只读容器和可编辑的富文本编辑器？

我的第一个想法是,一旦内容类型发生变化,就将编辑器拆分为较小的子编辑器.例如,您只从一个带文本的编辑器开始.然后,用户添加另一个编辑器(例如,单击按钮)并添加图像.但我不确定用户是否接受了这一点,然后将所有内容(文本和图像)放在第一个编辑器中.

我的第二个想法是保存在html编辑器代码视图中创建的整个内容,并在下次订购时将其加载到编辑器中.但我不确定是否可以通过这种方式创建<div>具有相同内容的"普通"只读容器.

在我看来,我的两个想法都不那么好,所以我问你们你们建议做什么.

我正在尝试使用两个按钮div在较小的<div>A 内水平移动更宽的B.
我发现了一个使用jquery的类似问题,但是不想在代码中仅使用该部分的库.

这是小提琴

我想使用"左"和"右"按钮滚动可见视野,以便在不使用jquery但使用纯Javascript,HTML和CSS的情况下向任一方向移动字段100px.

<div id="outer-div" style="width:250px;overflow:hidden;">
  <div style="width:750px;">
    <div style="background-color:orange;width:250px;height:100px;float:left;">
    </div>
    <div style="background-color:red;width:250px;height:100px;float:left;">
    </div>
    <div style="background-color:blue;width:250px;height:100px;float:left;">
    </div>
  </div>
</div>
<button>left</button>
<button>right</button>

我\xc2\xb4m 尝试创建一个数据框，其中包含一个ID 和一个数字向量，每行的成绩数未知，但我不\xc2\xb4t 知道如何执行此操作。

studentmean <-\n    data.frame(\n      Student = character(),\n      Grades = c(0),\n      stringsAsFactors = FALSE\n    )\n

后来我尝试使用以下方法向数据框中添加新行：

gradeList <- getGradesOfStudent(data$ResultFrame, matriculationNumber)$Grades\n    studentmean[nrow(studentmean) + 1, ] = list(as.character(matriculationNumber), gradeList\n

如何在单个数据框单元格内存储数值向量？

初始情况如下：在node_moduls我的项目文件夹中，有一个名为的模块，@example其中包含我想在应用程序中使用的一些组件。组件的数量各不相同，因此有必要动态说明模块中包含哪些组件。该example.module.ts文件如下所示：

import { NgModule } from '@angular/core';\nimport { NgbModule } from '@ng-bootstrap/ng-bootstrap';\nimport { FirstModule } from 'EXAMPLE_PATH';\nimport { SecondModule } from 'EXAMPLE_PATH';\nimport { ThirdModule } from 'EXAMPLE_PATH';\nimport { FourthModule } from 'EXAMPLE_PATH';\n\n\nconst MODULES = [\n  FirstModule,\n  SecondModule,\n  ThirdModule,\n  FourthModule \n];\n\n@NgModule({\n  imports: [NgbModule.forRoot(), ...MODULES],\n  exports: [NgbModule, ...MODULES],\n  providers: [ExampleService]\n})\nexport class ExampleModule {\n}\n

该MODULES数组包含所包含的所有组件。通常，模块会通过以下方式导入到应用程序中app.module.ts

import { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\nimport { ExampleModule } from '@example/example-module';\n\nimport …

在将某些内容粘贴到文本输入字段后，我试图获取它的内容。如何获取数据？我$event.target.value用于keyup事件的方法不起作用。如果您使用粘贴某些内容，则Ctrl + V由于keyup事件而起作用，但是，如果我尝试从浏览器的上下文菜单中粘贴某些内容，则它将不起作用。

这是一个非常简单的代码示例：

@Component({
  selector: 'my-app',
  template: `<input type="text" [ngModel]="value" (paste)="pasteEvent($event)" (keyup)="keyupEvent($event)">
  <br>{{result}}`
})
export class AppComponent {
  public result: string;

  public pasteEvent($event: any) {
    this.result = $event.target.value;
    console.log('paste: '+ $event.target.value);
    console.log($event);
  }

  public keyupEvent($event: any) {
    this.result = $event.target.value;
    console.log('keyup: '+ $event.target.value);
  }
} 

我想从 Angular 2+ 中的自定义浮动过滤器组件中打开带有过滤器选项的小菜单。
就像在官方文档中一样，应该可以有一个浮动输入字段，旁边有一个图标。

我设法创建了一个对我来说很好用的自定义浮动组件，唯一的问题是打开小菜单来选择过滤器选项，就像浮动过滤器的默认实现一样（见下图）。

你能告诉我如何从自定义浮动过滤器打开这个菜单，或者至少默认组件是如何做到这一点的吗？

这是我的一些代码：

打字稿

export interface TextFloatingFilterChange {
  model: SerializedTextFilter
}

export interface TextFloatingFilterParams extends IFloatingFilterParams<SerializedTextFilter, TextFloatingFilterChange> {
  value: string
}

@Component({
  selector: 'floating-text-filter',
  templateUrl: 'floating-text-filter.component.html',
  styleUrls: ['floating-text-filter.component.scss']
})
export class TextFloatingFilter implements IFloatingFilter<SerializedTextFilter, TextFloatingFilterChange, TextFloatingFilterParams>, AgFrameworkComponent<TextFloatingFilterParams>, AfterViewInit {
  private params: TextFloatingFilterParams;
  public currentValue: string;

  agInit(params: TextFloatingFilterParams): void {
    this.params = params;
    this.currentValue= '';
  }

  valueChanged() {
    this.params.onFloatingFilterChanged({model: this.buildModel()})
  }

  ngAfterViewInit(): void {
    this.valueChanged();
  }

  onParentModelChanged(parentModel: SerializedTextFilter): void {
    if(!parentModel) {
      this.currentValue = …

我正在尝试使用 SVG 和 CSS 创建一种进度环，到目前为止，它在 Chrome 中有效。但是，Firefox（61.0.1（64 位））给我带来了问题并且不显示我的圈子。我已经尝试使用这个问题的方法，但没有成功。有没有办法让戒指的样式在 Chrome 和 Firefox（均为最新版本）中正确显示？我在运行时添加样式有问题吗[ngStyles]？这是计算空间和显示进度所必需的

我有一个关于代码沙箱的运行示例，它也只适用于 chrome，但不适用于 Firefox。

超文本标记语言

<div class="my-progress-ring">\n    <svg>\n        <circle class="progress" [ngStyle]="getCircleStyles()"/>\n    </svg>\n</div>\n

CSS

div.my-progress-ring {\n  width: 50px;\n  height: 50px;\n}\n\nsvg {\n  height: 100%;\n  min-height: 100%;\n  width: 100%;\n  min-width: 100%;\n}\n\ncircle.progress {\n  stroke: red;\n  stroke-width: 4px;\n  stroke-linecap: round;\n  transform: rotate(-90deg);\n  transform-origin: 50% 50%;\n  cx: 50%;\n  cy: 50%;\n  fill: transparent;\n}\n

打字稿

public getCircleStyles(): any {\n    return {\n      \'r\': 21,\n      \'stroke-dasharray\': 131.947,\n …

我有一个函数，它应该检查一个对象是否有一个toString()函数并输出它或以其他方式返回该对象。问题是，它也会在平面对象上触发并最终[Object object]作为一个字符串返回，这在 GUI 上显然看起来很糟糕。有没有办法确定对象是否使用toString()返回丑陋的默认方法[Object object]或具有toString()返回漂亮字符串的自定义函数。

这是我目前的功能：

(data: any) => (data != null && typeof data.toString === 'function') ? data.toString() : data;

I\xc2\xb4m 目前正在尝试创建具有固定页眉和页脚以及动态内容区域的 yome 类型布局，该布局应使用剩余的垂直空间。内容包装器有一个内容容器，可以包含大量数据，因此可以出现滚动条。

但现在问题来了：正如您所看到的，模拟页面高度的主包装器应该停在 200px 高度，但正在被内容容器拉伸。

我不想\xc2\xb4t想在内容包装器上使用最大高度，也可以\xc2\xb4t在内容包装器上使用flex-shrink，因为这会通过将页脚移动到内容区域内来搞乱布局，让它们重叠。

因此，考虑到这一点，如何创建一个具有动态内容区域的布局，该区域不会垂直传播到无穷大，而是占用页面的剩余空间并在内容包装器内显示提供的内容？

div.main-wrapper {\r\n  height: 200px;\r\n  max-height: 200px;\r\n  min-height: 200px;\r\n  width: 100%;\r\n  min-width: 100%;\r\n  display: flex;\r\n  flex-direction: column;\r\n  background: grey;\r\n}\r\n\r\ndiv.content-wrapper {\r\n  flex: 1 0 auto;\r\n}\r\n\r\ndiv.content {\r\n  width: 100%;\r\n  height: 100%;\r\n  display: flex;\r\n  flex-flow: column;\r\n}\r\n\r\ndiv.header,\r\ndiv.footer {\r\n  height: 50px;\r\n  max-height: 50px;\r\n  min-height: 50px;\r\n  background-color: green;\r\n  min-width: 100%;\r\n  width: 100%;\r\n}

<div class="main-wrapper">\r\n  <div class="header">FIXED HEADER</div>\r\n  <div class="content-wrapper">\r\n    <div class="content">\r\n      DYNAMIC CONTENT\r\n      <br/>DYNAMIC CONTENT\r\n      <br/>DYNAMIC CONTENT\r\n      <br/>DYNAMIC CONTENT\r\n      <br/>DYNAMIC CONTENT\r\n …

如何在行flex父级的开始处显示两个div容器，在结尾处显示第三个容器？在以下示例中，child-3应该位于右侧。

这是一个快速示例，其中所有cildren在父级的开头：jsfiddle

.parent {
  height: 50px;
  width: 100%;
  border: 1px solid red;
  display: flex;
  flex-direction: row;
}

.child-1,
.child-2,
.child-3 {
  margin: 2px 1px;
  padding: 2px;
  border: 1px solid blue;
}

.child-1 {}

.child-2 {}

.child-3 {}

<div class="parent">
  <div class="child-1">
    child-1
  </div>
  <div class="child-2">
    child-2
  </div>
  <div class="child-3">
    child-3
  </div>
</div>