小编Ole*_*ann的帖子

打字稿/角度2:属性缺少类型

我对Typescript仍然很陌生,并且难以绕过接口.据我所知,接口是类的描述或类的合同.它允许我定义一个类可以具有哪些属性以及它们是哪种类型.我尝试实现它,但总是得到这个错误:

error TS2420: Class 'ResultPage' incorrectly implements interface 'ResultPageInterface'.
Property 'entries' is missing in type 'ResultPage'.
Run Code Online (Sandbox Code Playgroud)

这是界面的代码

export interface ResultPageInterface {
  entries:Array<any>;
  page_number:number;
  page_size:number;
  total_entries:number;
}

export class ResultPage implements ResultPageInterface {}
Run Code Online (Sandbox Code Playgroud)

在这里我想要使用它的类.

import { Injectable } from '@angular/core';
import { ResultPage } from '../interfaces/result-page.interface';

@Injectable()
export class SomeClass {

  constructor() {}

  buildPage(res:any): ResultPage {
    let page:ResultPage = new ResultPage();
    page.entries = res.data;
    page.page_number = res.pagination.page_number;
    page.page_size = res.pagination.page_size;
    page.total_entries = res.pagination.total_entries;
    return page;
  }

}
Run Code Online (Sandbox Code Playgroud)

typescript angular

10
推荐指数
1
解决办法
3万
查看次数

Angular 2:如何处理不同环境的应用配置

以下场景:我构建了一个使用REST API的Angular应用程序(可以使用Elixir或RoR或其他任何东西构建).在开发过程中,我希望Angular使用与生产中不同的API(可能包含测试数据,可能是因为我同时构建了API并且它在我的机器上运行).

此外,我团队的其他成员可能还想使用其他本地API地址.这意味着这不应该进入版本控制系统.

因此,例如api_base_url可能是http://localhost:4000对我,http://testapi.local对我的同事和http://api.example.com生产.

api_base_url值应该在多个组件中可用.

处理这个问题的好方法是什么?

angular

9
推荐指数
1
解决办法
6250
查看次数

Angular2:组件的组织程度如何?

例如:我有一个显示帖子列表的组件.它们是通过服务检索的,并且都显示在一个表中,每个帖子一行.这是我的PostComponent.

现在我还要编辑帖子并为其添加表单.

我应该将表单添加到我的PostComponent并使用一个组件吗?

我应该在新文件中添加一个新的PostFormComponent并在PostComponent中注入(或者我需要它)?

我应该在PostComponent的同一文件中定义第二个组件吗?

我知道最佳实践问题往往会被低估,但我对你的方法和最佳实践非常好奇.我知道这三个都有效.

谢谢!

angular

9
推荐指数
1
解决办法
1373
查看次数

从html5视频中删除黑色背景.出现一秒钟

如何从html5视频中删除黑色背景?加载时会显示几秒钟.使用CSS不起作用.

HTML:

<div id="start-screen">
  <video id="video-element">
    <source src="video-mp4.mp4" type="video/mp4">
    <source src="video-oggtheora.ogv" type="video/ogg">
  </video> 
</div>
Run Code Online (Sandbox Code Playgroud)

CSS(不工作):

#start-screen, video-element {
  background-color: #fff !important;
}
Run Code Online (Sandbox Code Playgroud)

谢谢!

html css video html5 html5-video

8
推荐指数
1
解决办法
1万
查看次数

NodeJS:在客户端存储JWT的位置?sessionStorage,localStorage还是cookies?

在使用NodeJS和(例如)AngularJS的SPA上存储JSON Web令牌以进行身份​​验证的最佳位置是什么?

到目前为止我得到了什么:

可能的地方:

  • HTML5 Web存储(localStorage/sessionStorage)
  • 饼干

Web存储(localStorage/sessionStorage)可通过同一域上的JavaScript访问.这意味着您站点上运行的任何JavaScript都可以访问Web存储,因此可能容易受到跨站点脚本(XSS)攻击.

localStorage具有不同的到期时间,sessionStorage只能在创建它的窗口打开时才能访问. localStorage持续到您删除它或用户删除它为止.

饼干,与仅Http cookie的标志一起使用时,不通过JavaScript访问,并且是免疫的XSS.但是,cookie很容易受到跨站点请求伪造(CSRF)的攻击.

那么存储JWT最安全的方式是什么

authentication cookies node.js jwt angularjs

8
推荐指数
1
解决办法
1139
查看次数

在Phoenix/Elixir中启用跨源资源共享CORS

我的前端是一个单独的Brunch.io AngularJS应用程序.由于我的前端在http:// localhost:3333上运行,而我的凤凰后端在http:// localhost:4000上运行,因此在尝试POST到http:// localhost:4000/api/users/register时出现此错误

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3333' is therefore not allowed access. The response had HTTP status code 404.
Run Code Online (Sandbox Code Playgroud)

所以我认为这是一个CORS问题.如何在凤凰中发送标题?

这是我的router.ex

  scope "/api", MyApp do
    pipe_through :api
    # Users
    post "/users/register", UserController, :register
  end
Run Code Online (Sandbox Code Playgroud)

这是我的UserController

defmodule MyApp.UserController do
  use MyApp.Web, :controller

  def register(conn, params) do
    IO.puts(inspect(params))

    conn
    |> put_status(201)
    |> json  %{ok: true, data: params}
  end

end
Run Code Online (Sandbox Code Playgroud)

elixir cors angularjs phoenix-framework

8
推荐指数
1
解决办法
3672
查看次数

Elixir:如何避免深层嵌套的case语句?

假设我有一个函数main_function,它依赖于其他三个函数的结果,每个函数都可以返回{:ok, result}或者返回{:error, error}.如何避免在javascript中使用深度嵌套的case语句,感觉就像回调地狱一样.

例:

def func1(input) do
  case SOMECONDITION do
    {:ok, result} ->
      {:ok, result}
    {:error, error} ->
      {:error, error}
  end
end

def func2(input) do
  case SOMECONDITION do
    {:ok, result} ->
      {:ok, result}
    {:error, error} ->
      {:error, error}
  end
end

def func3(input) do
  case SOMECONDITION do
    {:ok, result} ->
      {:ok, result}
    {:error, error} ->
      {:error, error}
  end
end

def main_function(input) do
  case func1(input) do
    {:ok, result} ->
      case func2(result) do
        {:ok, result} ->
          case …
Run Code Online (Sandbox Code Playgroud)

elixir

8
推荐指数
1
解决办法
1198
查看次数

如何将$ stateParams从ui-router传递给service in service?

我有一个路由来检索单个帖子和一个服务来查询我的API这样做.但我需要将参数从URL传递给服务,以便我可以正确调用API.我无法理解如何做到这一点.

这是我到目前为止所提出的.我遗漏了与此问题无关的内容.

谢谢你的帮助!

路由

myModule.config([
  '$stateProvider',
  '$urlRouterProvider',
  '$locationProvider',
  function($stateProvider, $urlRouterProvider, $locationProvider) {

    $stateProvider
      .state('post', {
        url: '/posts/:hash_id/:slug',
        templateUrl: '/js/app/views/post.html',
        controller: 'PostCtrl',
        resolve: {
          postPromise: ['posts', function(posts, $stateParams){
            //returns undefined
            console.log($stateParams);
            return posts.getOne($stateParams);
          }]
        }
      })
// etc
Run Code Online (Sandbox Code Playgroud)

服务

myModule.factory('posts', ['$http', 'auth', function($http, auth){
  var o = {
    posts: [],
    post: {}
  };
  o.getOne = function(params) {
    // Returns undefined
    console.log(params);
    return $http.get('/api/v1/posts/' + params.hash_id).success(function(data){
      angular.copy(data, o.post);
    });
  };
  return o;
}])
Run Code Online (Sandbox Code Playgroud)

javascript dependency-injection angularjs angularjs-service angular-ui-router

7
推荐指数
1
解决办法
9433
查看次数

Phoenix:尝试连接到Channel但是找不到GET/websocket错误的Route

我正在尝试使用频道(Websockets)将Angular 2前端连接到Phoenix应用程序.它们是完全独立的并且在localhost上的不同端口上运行(凤凰4000,角度2,5555).奇怪的是我(Phoenix.Router.NoRouteError) no route found for GET /websocket (MyApp.Router)在后端收到错误.并且前端的代码1006错误:

WebSocket connection to 'ws://localhost:4000/websocket?vsn=1.0.0' failed: Error during WebSocket handshake: Unexpected response code: 404.

// endpoint.ex

defmodule MyApp.Endpoint do
  use Phoenix.Endpoint, otp_app: :my_app

  # socket "/socket", MyApp.UserSocket
  socket "/websocket", MyApp.PostSocket

  # Serve at "/" the static files from "priv/static" directory.
  #
  # You should set gzip to true if you are running phoenix.digest
  # when deploying your static files in production.
  plug Plug.Static,
    at: "/", from: :my_app, gzip: false, …
Run Code Online (Sandbox Code Playgroud)

elixir phoenix-framework

7
推荐指数
1
解决办法
3018
查看次数

Angular 2 Typescript:是否可以将接口作为参数传递给函数?

我有以下问题:我从 JSON API 中提取数据。我目前为每个数据模型(例如文章、用户等)提供一个服务,并为每个数据模型提供一个模型类。但这很疯狂,而且无法真正维护。所以我想重构,以便为每个数据模型和一个统一的DataAPIService.

问题是,该DataAPIService查询 API 中的函数不应返回 JSON,而是已查询类型的对象或对象集合。所以我需要一种方法将接口或类型传递到服务的查询方法中,然后初始化这种类型的新对象。

这可能吗?我说得通吗?这里有一些代码可以帮助理解我的意思并显示我当前的进度。

import { Injectable } from '@angular/core';

import { AuthHttp } from 'angular2-jwt';
import 'rxjs/add/operator/map';

import { Config } from '../config/env.config';

@Injectable()
export class DataAPIService {

  constructor(
    private authHttp: AuthHttp
  ) {}

  // This function will be called to retrieve data (for example from a Component). 
  // I want to pass in the object type or interface so that I only have one 
  // getIndex() function and not …
Run Code Online (Sandbox Code Playgroud)

typescript angular

7
推荐指数
2
解决办法
2万
查看次数