标签: angular7

目前我使用的商店是功能模块的扁平结构，即：

{
    feature_A: {
       A:'A',
       B:'B'
    },
    feature_B:{
        C:'C',
        D:'D'
    }
}

但我想做的是：

{
    feature_A: {
       A:'A',
       B:'B',
       feature_B:{
        C:'C',
        D:'D'
      }
    }
}

也许类似：App.Module

StoreModule.forFeature('feature_A', fromFeature_A.feature_A_Reducers)
StoreModule.forFeature('feature_A.feature_B', fromFeature_B.feature_B_Reducers)

在网上寻找这个问题的答案时，除了建议保持功能模块的扁平结构之外，并没有真正找到真正的答案。

我正在使用带有鹅毛笔编辑器的 Angular 7。用例：我有鹅毛笔编辑器，需要在双击任何按钮时附加一些文本，获取双击的值，但无法获取鹅毛笔编辑器内的光标位置。

我尝试使用 (onContentChanged)、(onEditorCreated) 和 (onSelectionChanged)，还尝试使用 onFocus，因为我必须在单个模板中使用多个鹅毛笔编辑器。

需要仅将文本附加到焦点编辑器上，但仅附加到光标位置上。

这是我的代码示例

<quill-editor #editor [maxLength]="maxLength"
          [minLength]="minLength"
          [modules]="quillConfig"
          [(ngModel)]="text"
          (onContentChanged)="contentchanged($event)"
          (onEditorCreated)="editorCreated($event)"
          [placeholder]="placeholder"
          [readOnly]="readonly"
          [required]="required"
          [style]="{height: height}"
          (onSelectionChanged)="onFocus($event)">

我在 Angular 应用程序中使用devExtreme UI 框架。

在文档中我找到了如何设置focus它说使用method focus()

但没有重点DxTextBoxComponent

如何设定焦点？

我的代码是：

@ViewChild("name", { static: false }) public inputName: DxTextBoxComponent;

  ngAfterViewInit() {
    this.inputName.instance.focus();
  }

HTML 是：

<dx-text-box #name>

没有效果

在 Angular 7 中，我定义了不同的组件应用程序文件夹，并在路由中定义组件，当我在 url 中定义路由器名称时，工作正常，向我显示附加到该 url 的组件，但是当我在锚标记中定义路由名称时单击锚定它，这里不起作用是我的 html 代码

<li class="nav-item">
  <a class="nav-link" routerLink="/home">Home</a>
</li>
<li class="nav-item @@about">
  <a class="nav-link" routerLink="/about">About</a>
</li>
<li class="nav-item @@blog">
  <a class="nav-link" routerLink="/blog">BLOG</a>
</li>

这是我的路由器

const routes: Routes = [{
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: 'home',
    component: HomeComponent
  },
  {
    path: 'about',
    component: AboutComponent
  },
  {
    path: 'blog',
    component: BlogComponent
  },
];

我正在使用带有 formArray 的 mat-table，我还需要 Mat-paginator。

但不幸的是分页不起作用。

Stackbltiz 演示

样本来源，

.html

<form [formGroup]="form">
  <table mat-table [dataSource]="dataSource" formArrayName="dates">
    <!-- Row definitions -->
    <tr mat-header-row *matHeaderRowDef="displayColumns"></tr>
    <tr mat-row *matRowDef="let row; let i = index; columns: displayColumns;"></tr>

    <!-- Column definitions -->
    <ng-container matColumnDef="from">
      <th mat-header-cell *matHeaderCellDef> From </th>
      <td mat-cell *matCellDef="let row; let index = index"  [formGroupName]="index"> 
        <input type="date" formControlName="from" placeholder="From date">
      </td>
    </ng-container>

    <ng-container matColumnDef="to">
      <th mat-header-cell *matHeaderCellDef> To </th>
      <td mat-cell *matCellDef="let row; let index = index"  [formGroupName]="index">
        <input type="date" formControlName="to" placeholder="To …

我试图在我的项目中使用单选按钮，但我未能以编程方式检查第一个单选按钮。

我已经尝试过该解决方案，但它仍然无法在我的代码中工作。

这是我的单选按钮：

<div class="col-sm-3 col-form-label" style="padding-right: 0px;">
    <input type="radio" value=1 [checked]="actionUpload == 1" name="uploadAction" [(ngModel)]="actionUpload" (ngModelChange)="choose(1)"> Radio 1
    <input type="radio" value=2 [checked]="actionUpload == 2" name="uploadAction" [(ngModel)]="actionUpload" (ngModelChange)="choose(2)"> Radio 2
</div>

下面是我的打字稿：

<div class="col-sm-3 col-form-label" style="padding-right: 0px;">
    <input type="radio" value=1 [checked]="actionUpload == 1" name="uploadAction" [(ngModel)]="actionUpload" (ngModelChange)="choose(1)"> Radio 1
    <input type="radio" value=2 [checked]="actionUpload == 2" name="uploadAction" [(ngModel)]="actionUpload" (ngModelChange)="choose(2)"> Radio 2
</div>

这是我得到的结果，无线电 1 从未被检查过。

我错过了什么吗？

我很乐意提供任何帮助。

我想为基元添加一些方法。我有以下文件：

string-extension.ts：

interface String {
    isNullOrEmpty(this: string): boolean;
}

String.prototype.isNullOrEmpty = function (this: string): boolean {
    return !this;
};

我有一个包含以下代码的组件：

constructor () {
    let a = "asd";
    alert(a.isNullOrEmpty());
}

没有导入被添加到顶部。当我运行客户端时，它在该行崩溃。

a.isNullOrEmpty is not a function

当我检查代码时，我发现我的string-extension.ts文件未包含在其中。我对C＃中的概念非常熟悉，但对TypeScript不太了解，因此，如果您需要更多信息，请提供。

谢谢。

我在端口3000上运行带有express的服务器，在端口4200上运行带有angular 7的客户端。发出请求后，遇到了CORS问题。

通过CORS策略已阻止从源“ http：// localhost：4200 ” 访问“ http：// localhost：3000 / drug ” 上的XMLHttpRequest ：在请求的资源上不存在“ Access-Control-Allow-Origin”标头。

我已经在线尝试了所有解决方案，例如使用cors软件包，并在路由器之前设置了中间件，如以下代码所示（Angular 6-请求资源上没有'Access-Control-Allow-Origin'标头）。但是它仍然没有解决，并不断出现同样的错误。有人会遇到无法用所有解决方案解决CORS的问题吗？请你帮助我好吗？

app.use((req, res, next) => {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT");
  res.header(
    "Access-Control-Allow-Header",
    "Origin, X-Requested-With, Content-Type, Accept"
  );
  next();
});

app.use((req, res, next) => {
      res.header("Access-Control-Allow-Origin", "http://localhost:4200");
      res.header("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT");
      res.header(
        "Access-Control-Allow-Header",
        "Origin, X-Requested-With, Content-Type, Accept"
      );
      next();
    });

我有一个line-chart，我想缩放它但无法做到。这是我的代码

let ctx = document.getElementById('myChart')

let chart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
          label: '# of Votes',
          data: [7, 10, 3, 5, 2, 3],
          fill: true,
          backgroundColor: 'orange',
          borderColor: 'green',
          pointBorderColor: 'red',
          pointBackgroundColor: 'red'
        }]
      },
      options: {
        plugins: {
          pan: {
            enabled: true,
            mode: 'x',
            onPan: function () { console.log('I was panned!!!'); }
          },
          zoom: {
            enabled: true,
            drag: true,
            mode: 'x',
            onZoom: function () { …

我有一个子组件，该子组件使用@Input指令从父组件获取属性值。问题在于，双向数据绑定似乎不适用于此输入属性。知道是什么原因吗？

子组件类

@Component({
  selector: 'app-edit-property',
  templateUrl: './edit-property.component.html',
  styleUrls: ['./edit-property.component.css']
})
export class EditPropertyComponent implements OnInit {

  @Input() property: any;

  constructor(
    private propertiesService: PropertiesService
  ) { }

  ngOnInit() {
  }

}

模板

<input type="text" class="form-control" required name="title" [(ngModel)]="property.title" #title="ngModel">

父组件

<app-edit-property [property]='property'></app-edit-property>