小编sma*_*use的帖子

我正在使用Sematinc-UI和Angular2 ReactiveFormsModule表单,我想[formControl]用于选择多个.

如果我使用select它没有问题:

        <select class="ui fluid dropdown" [formControl]="myForm.controls.category">
            <option *ngFor="let item of categories" value="{{item}}">{{item}}</option>
        </select>

如果我使用select multiple它不起作用:

        <select multiple="" class="ui fluid dropdown" [formControl]="myForm.controls.category">
            <option *ngFor="let item of categories" value="{{item}}">{{item}}</option>
        </select>

我收到此错误:

core.umd.js:3462 EXCEPTION:未捕获(在承诺中):错误:http:// localhost:3000/app/components/category.component.js中的错误类CategoryComponent - 内联模板:0:1701由:: values引起.地图不是一个功能

可能是什么问题呢？

我创建了这个AlertDialog:

            String msg = "Connessione lenta o non funzionante";
            AlertDialog alertDialog;
            alertDialog = new AlertDialog.Builder(HomePage.this).create();
            alertDialog.setTitle("Timeout connessione");
            alertDialog.setMessage(msg);
            alertDialog.show();

我想添加确定和取消按钮.我在这里搜索StackOverflow但是setButton方法似乎已被弃用.我还为AlertDialog.Builder找到了setPositiveButton和setNegativeButton,但即使它们似乎也被弃用了.

我正在用Angular和开发一个应用程序Semantic-UI.应用程序应该是可访问的,这意味着它应该符合WCAG 2.0.为了达到这个目的,模态应该在对话框中保持焦点,并防止用户走出去或在位于模态下的页面元素之间移动"标签".

我找到了一些工作示例,如下所示:

• JQuery对话框:https://jqueryui.com/dialog/#modal-confirmation
• dialogHTML 5.1元素:https://demo.agektmr.com/dialog
• ARIA模式对话框示例:http: //w3c.github.io/aria-practices/examples/dialog-modal/dialog.html (我已在Plunker上复制)

这是我尝试用Semantic-UI创建一个可访问的模态:https://plnkr.co/edit/HjhkZg

如您所见,我使用了以下属性:

role="dialog"

aria-labelledby="modal-title"

aria-modal="true"

但他们没有解决我的问题.你有没有办法让我的模态保持专注,只有当用户点击取消/确认按钮时才会失去它？

我正在开发一个Angular2应用程序,我正在使用Gulp来管理构建我的应用程序的任务.这是我用于构建的任务:

gulpfile.js

// Generating minified CSS files for Angular2 Component styleUrls
gulp.task('styles', function(cb) {
    return gulp.src('src/app/**/*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(minifyCss())
        .pipe(gulp.dest(paths.dist + '/app/'));
});

// Embedding minified HTML templates into Typescript source files
gulp.task('templates', function () {
    return gulp.src('src/app/**/*.ts')
        .pipe(embedTemplates({sourceType:'ts'}))
        .pipe(gulp.dest('dist/app'));
});

// Transpiling Typescript files to Javascripts ones
gulp.task('compile', function () {
    return gulp.src(['dist/**/*.ts', 'typings/**/*.d.ts'])
        .pipe(tsCompiler())
        .pipe(gulp.dest(paths.dist));
});

// Creating one minified JS file
gulp.task('scripts', ['compile'], function(cb) {
    return gulp.src(paths.dist + '/**/*.js')
        .pipe(concat('app.min.js'))
        .pipe(minifyJs())
        .pipe(gulp.dest(paths.dist));
});

由于CSS文件<style>由Typescript编译器注入到标记中,我希望在SASS处理后删除CSS文件.对于Javascript也一样:因为生成的JS文件然后在一个文件中缩小,我希望在Typescript转换后删除所有以前的JS文件.

怎么达到那个？ …

我正在尝试从Angular2文档中的http教程之后从JSON文件中获取数据:

服务:

import { Injectable } from '@angular/core';
import { Headers, Http } from '@angular/http';
import 'rxjs/add/operator/toPromise';
import { Hero } from './hero';

private heroesUrl = 'app/heroes';  // URL to web api

constructor(private http: Http) { }

getHeroes(): Promise<Hero[]> {
    return this.http.get(this.heroesUrl)
        .toPromise()
        .then(response => response.json().data as Hero[])
        .catch(this.handleError);
}

零件:

import { Component, OnInit } from '@angular/core';
import { Hero } from './hero';
import { HeroService } from './hero.service';

@Component({
  selector: 'my-app',
  template: // some template,
  styles: …

我试图从JSON文件中获取数据来构建表单.

这是我模板的一部分:

  <div class="form-group">
    <label for="power">Power</label>
    <select class="form-control" id="power" required>
      <option *ngFor="let p of heroes" [value]="p.level">{{p.level}}</option>
    </select>
  </div>

这是远程JSON文件的一部分:

{
    "data": [
        {
            "level": "newbie",
            "places": [
                {
                    "place": "earth",
                    "categories": [
                        {
                            "category": "human",
                            "values": [
                                ...

它没有问题,我newbie在select菜单中得到了其他选择.但我想在地方循环,所以我用这种方式编辑html模板:

  <div class="form-group">
    <label for="power">Power</label>
    <select class="form-control" id="power" required>
      <option *ngFor="let p of heroes[0].places" [value]="p.place">{{p.place}}</option>
    </select>
  </div>

这是我用来从JSON文件中获取数据的服务:

@Injectable()
export class HeroService {
    private url = 'app/mockups/heroes.json';

    constructor(private http: Http) { }

    getHeroes(): Promise<Hero[]> {
        return this.http.get(this.url)
            .toPromise() …

我试图用Angular2路由器重现我的问题,但我不能在Plunker中创建我的项目的工作副本.

这是我的尝试:https://plnkr.co/edit/1lpoYP4qlBZLuqZHW7Ft

我在index.html文件中使用了以下代码行,使路径路径与Plunker的运行环境一起使用,并使用我的''默认路径.

<script>document.write('<base href="' + document.location + '" />');</script>

为什么我还在get这个错误？

我在 Angular 7 中使用虚拟滚动。我创建了一个CdkVirtualScrollViewport监听器，并为每个滚动事件添加一个监听器。我的意思是我希望在该视口内滚动时收到通知。

我尝试注入scrollDispatcher我的组件，但我看到它scrolled()是在整个组件上滚动时触发的，然后我发现它绑定到组件而不是仅绑定到CdkVirtualScrollViewport.

这是我的代码：

@ViewChild(CdkVirtualScrollViewport) virtualScroll: CdkVirtualScrollViewport;

items: Array<any>;

constructor(private scrollDispatcher: ScrollDispatcher, private cd: ChangeDetectorRef) {
this.items = [];
}

ngOnInit(): void {
  for (let i = 0; i < 100; i++) {
    this.items.push(i);
  }
}

ngAfterViewInit(): void {
this.scrollDispatcher.scrolled()
  .subscribe(event => {
    console.log('scrolled');
  });
}

正如您所看到的，CdkVirtualScrollViewport这是我的组件内的一个子元素：

<div class="header">
  {{header}}
</div>

<div class="container">
  <cdk-virtual-scroll-viewport itemSize="4" class='example-viewport'>
    <li *cdkVirtualFor="let item of items" class='example-item' >{{item}}</li>
  </cdk-virtual-scroll-viewport>
</div>

<div class="footer">
  {{footer}} …

我正在开发一个基于 Fomantic-UI 框架（即 Semantic-UI 的一个分支）的 Angular 项目。

我已经安装了它：

npm install --save fomantic-ui

然后我在angular.json文件中添加了以下几行：

"styles": [
    "node_modules/fomantic-ui/dist/semantic.min.css",
    "src/styles.scss"
],
"scripts": [
    "node_modules/jquery/dist/jquery.min.js",
    "node_modules/fomantic-ui/dist/semantic.min.js"
]

我还为它安装了类型npm install --save @types/semantic-ui，根据这个，它们应该可以与 Fomantic-UI 一起正常工作。

无论如何，这似乎不足以使用诸如modal(), dropdown(), 之类的函数calendar()，实际上我在 IDE (Webstorm) 和编译过程中都会出错：

TS2339: Property 'modal' does not exist on type 'JQuery<HTMLElement>'.

TS2339: Property 'calendar' does not exist on type 'JQuery<any>'.

TS2339: Property 'dropdown' does not exist on type 'JQuery<HTMLElement>'.

等等...

你知道在我的项目中导入 Fomantic-UI 的正确方法是什么吗？

我想使用 API 在我的 Wordpress 博客上发帖。因为我在一个 Javascript 应用程序中，所以我会使用这种语言来做到这一点。

我进行了一些搜索，发现使用 Wordpress XML-RPC 协议的node-wpapi包。一切正常，除了发布带有媒体或特色图片的文章。

const responseUploadImage = await wp.media()
    .file('./tempImage.jpg')
    .create({
        title: 'My awesome image',
        alt_text: 'an image of something awesome',
        caption: 'This is the caption text',
        description: 'More explanatory information'
    });

const responsePostCreation = await wp.posts().create({
    title: 'Your Post Title',
    content: 'Your post content',
    // status: 'publish'
});

const response = await wp.media().id(responseUploadImage.id).update({
    post: responsePostCreation.id
});

它确实创建帖子和上传媒体，但它不会创建带有媒体的帖子。

您知道使用 JS 库创建带有媒体和特​​色图像的帖子的替代方法或更好的方法吗？