小编rmc*_*rry的帖子

假设我有简单的Angular2组件

@Component({ selector: 'parent' })
@View({
    template: `
        <p>Parent {{ data }}</p>
        <child [model]="data"></child>
    `,
    directives : [Child]
})
export class Parent {
    data: number = 42;
}

你可以看到它使用另一个简单的组件

@Component({
    selector: 'child',
    properties : ['model']
})
@View({
    template: `
        <p>Child {{ model }}</p>
    `,
})
export class Child {
    model: number;
}

我正在model从parent组件传递到child角度的[property]数据绑定语法.所以,如果我想跟踪的一些变化model中parent,我可以很容易地事件添加到child,并通过(event)语法跟踪的"父"的变化.那么如何在parent变更时实施相反的情况model并child希望得到通知？

关于这个主题至少有10个问题,但没有一个回答这个问题.许多问题都与Rails的形式像这样,我没有,或者是更复杂的,像JSON结构,这还是这个.

编辑关于已接受的答案以及为什么这不是完全相同的

来自@CarlosRoque的答案中的链接问题最初看起来是同样的问题,但它只解决了这个特定问题的Rails方面.

如果您阅读了所有注释,您将看到多次尝试更改template_params方法,使用"template_items_attributes"对嵌套属性"template_items"进行RENAME或REPLACE.这是必要的,因为Rails accepts_nested_attributes_for需要将"_attributes"附加到名称,否则它无法看到它.

如果你检查修复wrap_parameters的答案中的猴子补丁代码,以便它适用于嵌套属性,你仍然会遇到它实际上找不到"template_items"(嵌套对象)的问题,因为它没有后缀"_attributes ".

因此,要完全解决此问题,还必须修改客户端以将嵌套对象作为"template_items_attributes"发送.对于JS客户端,可以通过在对象上实现toJSON()方法来完成,以便在序列化期间对其进行修改(此处为示例).但请注意,当您反序列化JSON时,您需要手动创建该对象的实例以使toJSON()起作用(在此解释原因).

我有一个简单的has_many/belongs_to:

楷模:

class Template < ApplicationRecord
  belongs_to :account
  has_many :template_items
  accepts_nested_attributes_for :template_items, allow_destroy: true
end


class TemplateItem < ApplicationRecord  
  belongs_to :template
  validates_presence_of :template

  enum item_type: {item: 0, heading: 1} 
end

从客户端发送的json看起来像这样:

{
  "id": "55e27eb7-1151-439d-87b7-2eba07f3e1f7",
  "account_id": "a61151b8-deed-4efa-8cad-da1b143196c9",
  "name": "Test",
  "info": "INFO1234",
  "title": "TITLE1",
  "template_items": [
    {
      "is_completed": false,
      "item_type": "item"
    },
    {
      "is_completed": false,
      "item_type": "heading"
    }
  ]
} …

简而言之,更新:

我正在寻找相当于做这样的事情,但对于一个Observable而不是一个常规数组:

var i = this.customers.findIndex(customer => customer._id === id);
~i && this.customers[i] = newObject.

我在屏幕上有2个组件.左侧的列表组件和右侧的显示组件(假设它是一个只呈现最新'版本'数据的PDF)

单击列表中的项目时,它会在右侧的组件中显示该选定项目的数据.

该列表是一个可观察的数组:

items$: Observable<Proposal[]>;

列表中的每个项目都有一个子组件.可以单击单个项目上的图标,这会更改该子项的数据.孩子有一个事件发射器告诉父母数据已经改变:

@Output() proposalDataChanged: EventEmitter<string> = new EventEmitter();

父母绑定它:

 <fb-proposal-list-item
  [proposal]="proposal" (proposalDataChanged)="handleDataChanged(p)">
 </fb-proposal-list-item>

我遇到的问题是,在handleDataChanged方法中,我想在Observable中搜索已更改的项,并将其替换为从发射器返回的新有效负载.我不想调用服务器来刷新整个列表.

我需要这样做,以便右侧的组件反映新数据.

我能找到这样的项目:

handleDataChanged(data: Proposal){
  this.items$.subscribe((items: Proposal[]) => item = items.find(p => p.id 
  == data.id));
}

但无法弄清楚如何更新Observable中的项目,而不仅仅是找到更改的项目.

我知道我可以通过在其他地方导航然后再返回以强制刷新来"欺骗"组件,但这也会触及API(并重新加载页面).

网址如下所示:

/pages/proposals/manage/-XHzOJY/document

url中的slug是当前所选项目的id(在右侧的组件中呈现).

所以我不能在这里使用params更改检测,因为它不会改变.用户正在对已选择的对象进行更改,该对象是可观察数组内的许多对象之一.

UPDATE

以下是父组件的完整代码:

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Observable, Subject } from 'rxjs/Rx';

import { Proposal } …

我正在使用带有Rail 5.1 API的rack-cors gem.

根据文档我有以下初始化程序:

配置/初始化/ cors.rb

module Api
  Rails.application.config.middleware.insert_before 0, Rack::Cors do
    allow do
      origins ['http://localhost:4200','https://app.mydomain.com/']

      resource '*',
        headers: :any,
        :expose  => ['access-token', 'expiry', 'token-type', 'uid', 'client'],        
        methods: [:get, :post, :put, :patch, :delete, :options, :head]
    end
  end
end

但是,这意味着当部署到生产时,我的api将接受来自任何localhost:4200来源的请求.

如何将这些设置分开,以便不同的环境可以具有不同的允许来源？

我有一个问题,我需要从网址中提取查询字符串参数.该参数可以是该单词的一个"Territory"或"territory"其他大/小写变体.虽然以下两种情况如下工作但我想知道是否有更好的方法？

IDictionary<string, string> queryString = HtmlPage.Document.QueryString;

if (queryString.ContainsKey("territory"))
{
    ish.SetDefaultRegion(int.Parse(queryString["territory"]));
    // do something (the same something as below)
}
else if (queryString.ContainsKey("Territory"))
{
    ish.SetDefaultRegion(int.Parse(queryString["Territory"]));
    // do something (the same something as above)
}

我宁愿将查询字符串插入到字典中忽略大小写(即,如果用户意外键入"TERRITORY"此代码会失败,那么我怎样才能测试该单词是否存在而不管大小写？

阅读如何使用RxJ的distinctUntilChanged？和此，似乎distinctUntilChanged改变了输出流只提供不同的连续值。

我的意思是，如果相同的值立即连续到达，则您实际上是在过滤流，并且只会出现一次重复值。

所以，如果我这样写：

this.myFormControl.valueChanges
  .debounceTime(1000)
  .distinctUntilChanged()
  .subscribe(newValue => {
    console.log('debounced: ', newValue);
  });

我看不到输出与此不同：

this.myFormControl.valueChanges
  .debounceTime(1000)
  .subscribe(newValue => {
    console.log('debounced: ', newValue);
  });

我已经看过一些地方，distinctUntilChanged在订阅valueChanges表单输入时建议使用—但并不清楚为什么。

这是一种输入，因此如果用户在输入，它总是在变化，对吗？这些值将始终是不同的，因此您无缘无故地添加了一个额外的操作来过滤输入。

还是我在这里想念什么？

编辑

使用distinctUntilChanged按我的第一个代码示例中，我创建带有值的形式输入Mr Trump，并确保它被保存在模型中。

然后，我在控件内部单击并粘贴Mr Trump。由于值是相同的，所以我希望不会看到任何记录的内容-控件具有与以前相同的值，因此，当然distinctUntilChanged应该忽略它吗？

编辑2

在进一步检查我的测试后，此行为似乎是因为我使用了以下数组AbstractControls：

this.itemsControl = <FormArray>this.form.controls['items']; 
...
this.itemsControl.controls[index].valueChanges...

因此，尽管有点奇怪，当输入的值相同时它仍然会触发，但是我猜测我需要连接到valueChanges该数组项（表单组）内的实际输入，而不是数组项本身。

编辑3

因此，将EDIT 2中的代码更改为以下代码后，不会触发valueChanges（已按预期）将已经存在的相同值粘贴到输入控件中。在EDIT 2中valueChanges，钩子连接到整个formGroup，而不是单个输入控件（在本例中称为content）：

let fg = this.itemsControl.controls[index]; // …

我想知道我的用户是否正在浏览我的rails应用程序中的页面

• 平板电脑或
• 移动设备或
• 台式电脑

我挖掘了许多不同的解决方案.这是我的最爱:

1. ua-parser gem:https://github.com/ua-parser/uap-ruby似乎非常干净但不幸的是它总是Other在我使用时绘图parsed_string.device- 我可以很好地检测操作系统和浏览器.
2. 从头开始写

从头开始写作结果如下:

if request.user_agent.downcase.match(/mobile|android|iphone|blackberry|iemobile|kindle/)
  @os = "mobile"
elsif request.user_agent.downcase.match(/ipad/)
  @os = "tablet"
elsif request.user_agent.downcase.match(/mac OS|windows/)
  @os = "desktop"
end

但是,我想念的是用户代理"设备"定义的完整文档.

例如:如果用户在平板电脑/移动设备或桌面上浏览,我需要查看哪些模式？我不能只是猜测和检查,例如ua-parser正则表达式也没有帮助我(非常复杂):https://github.com/tobie/ua-parser/blob/master/regexes.yaml

有没有简单的解决方案来解决我的问题？谷歌分析如何做到这一点？我试图研究但找不到它.他们还展示设备(桌面/平板/移动).

我已经阅读了这方面的所有问题,就像这一个,但它没有帮助.

主机:Windows 10,运行VirtualBox和PgAdmin.

我已正确设置Docker并运行几个容器而没有问题.现在我尝试设置Postgres.我尝试了两个:

1 https://hub.docker.com/r/paintedfox/postgresql/

2 https://hub.docker.com/_/postgres/

两者都有同样的问题.当我尝试从PgAdmin连接时,它说服务器不听.

我跑的时候docker inspect postgres看到了

"NetworkSettings":{"Bridge":"","SandboxID":"6ad76f4d61017c44f814c5ec7ab9081a650d925a46c2b69902c4f0e5209076ce","HairpinMode":false,"LinkLocalIPv6Address":"","LinkLocalIPv6PrefixLen":0,"Ports":{"5432/tcp": null},"SandboxKey":"/ var/run/docker/netns/6ad76f4d6101","SecondaryIPAddresses":null,"SecondaryIPv6Addresses":null,"EndpointID":"3f14630554c972ac875cbb384725c6970d1d4d5acfba7cbc05e416b5b22f0056","Gateway":"172.17.0.1", "GlobalIPv6Address":"","GlobalIPv6PrefixLen":0,"IPAddress":"172.17.0.2",

我已经尝试将该IP地址作为PGAdmin中的主机.

我尝试使用-p 5432:5432设置容器并连接为127.0.0.1:5432.

我已经尝试在VirtualBox中为容器设置端口转发.

我也尝试过机器主机,如Kitematic:192.168.99.100所示

这个问题解释了这个问题,但是该项目并没有像我一样使用angular-cli构建,因此我没有webpack.config文件.

虽然我在下面描述的问题显然是关于使base_url设置正确,但它与此问题不同,这是关于设置角度以将请求发送到像api这样的base_url.

我的项目在localhost上运行并运行github:pages(甚至css都正确加载).唯一不适用于github的东西:页面是图像,它们全部返回404(即使我可以看到它们,如果我直接在浏览器中导航到assets文件夹).

问题是在localhost上,angular-cli在主机名后面没有子文件夹运行项目.但github:pages确实如此.

比如说项目名称testapp就在github:pages这里部署:

https://<username>.github.io/testapp

图像在

src/assets/images

它们在angular-2组件内的css中使用相对路径引用,如下所示:

background-image: url('../../assets/images/dining-room.png');

那么如何配置angular-2生产部署文件,以便在生产中路径变为:

background-image: url('testapp/assets/dining-room.png');

据我所知,这github:pages是基于Jekyll,我理解这个解释,但我不明白的是你如何配置一个angular-cli项目,以便知道github:pages正在使用文件夹来部署应用程序.

到目前为止,我已经发现部署的命令行github:pages有一个base_href选项.所以我可以这样做:

ng github-pages:deploy --base-href /testapp/

然后我可以在/ dist文件夹中看到html文件已被更改为包含基本href,如下所示:

<base href="/testapp/">

我本来希望这可以自动解决问题,但图像仍会返回404.这个base_href不会像你期望的那样自动注入到相对路径中.在本地,index.html文件<base href="/">显然有效.

在试图解决这个问题时,我开始相信这与Angular构建组件的方式有关.可以在这里找到一个非常好的解释.

{
  "project": {
    "version": "1.0.0-beta.22-1",
    "name": "floorbook"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts", …

在Rails 4中,这是关于如何做到这一点的问题.我想知道的是,虽然这有效,但为什么日志还在抱怨？

在Rails 5.1.3中,我有一个JSON列(letterhead)作为我的模型属性之一(并且里面的json是一个具有各种属性的哈希,我不关心白名单).我只是想让列本身允许/列入白名单.

关于Rails的注意事项5.1.4

在5.1.4中有一种Rails方法可以做到这一点,请参阅此提交.有一个相当长的讨论在这里关于这个github上.在Rails 5.1.4中,它只是这样:

def account_params
  params.require(:account).permit(:id, :name, :plan_id, letterhead: {})
end

:letterhead允许该参数,日志中不显示错误,模型保存.但显然它允许在该参数内任意输入,因此请小心使用.

如果您确实想限制在这样的参数中允许哪些哈希键,那么您也可以将这些哈希值列入白名单,例如:

def account_params
  params.require(:account).permit(:id, :name, :plan_id, letterhead: [:address, :logo, :contact_info])
end

这现在可以防止任何其他任意键,:letterhead因为我明确地只允许这些3 -:address, :logo, :contact_info

Rails 5.1.3(及更早版本)

我可以使用以下任一方式允许此列(有关其他可能选项,请参阅链接的讨论):

选项1

def account_params
  params.require(:account).permit(:id, :name, :plan_id, :letterhead).tap do |whitelisted|
    whitelisted[:letterhead] = params[:account].fetch(:letterhead, ActionController::Parameters.new).permit!
  end
end

选项2

def account_params
  params.require(:account).permit(:id, :name, :plan_id, :letterhead).tap do |whitelisted|
    whitelisted[:letterhead] = params[:account][:letterhead].permit!
  end
end …