小编Fra*_*ssi的帖子

无法绑定到'formGroup',因为它不是'form'的已知属性

情况:

请帮忙!我试图在我的Angular2应用程序中制作一个非常简单的表单,但无论它从不工作.

角度版本:

Angular 2.0.0 Rc5

错误:

Can't bind to 'formGroup' since it isn't a known property of 'form'
Run Code Online (Sandbox Code Playgroud)

在此输入图像描述

代码:

风景:

<form [formGroup]="newTaskForm" (submit)="createNewTask()">

    <div class="form-group">
        <label for="name">Name</label>
        <input type="text" name="name" required>
    </div>

     <button type="submit" class="btn btn-default">Submit</button>

</form>
Run Code Online (Sandbox Code Playgroud)

控制器:

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators, FormBuilder }  from '@angular/forms';
import {FormsModule,ReactiveFormsModule} from '@angular/forms';
import { Task } from './task';

@Component({
    selector: 'task-add',
    templateUrl: 'app/task-add.component.html'

})


export class TaskAddComponent {

    newTaskForm: FormGroup;

    constructor(fb: FormBuilder) 
    {
        this.newTaskForm …
Run Code Online (Sandbox Code Playgroud)

typescript angular2-forms angular

671
推荐指数
29
解决办法
49万
查看次数

离子:如何使div居中?

情况:

我正在使用Ionic框架制作应用程序.在一个页面中,我需要显示图像.此图像必须水平居中.

ATTEMPT 1:

文档之后,我将一行划分为三个相等的列,并将图像放在第二行中.

 <div class="row">
    <div class="col col-33"></div>
    <div class="col col-33">
        <img src="{{ data.logo }}" alt="">
    </div>
    <div class="col col-33"></div>
 </div>
Run Code Online (Sandbox Code Playgroud)

但不幸的是,图像远未集中.倾向于留在屏幕的左半部分.

ATTEMPT 2:

尝试一些旧的CSS技巧.

<div style="margin: 0 auto;">
    <img src=" {{ data.logo }} " alt="" >
</div>
Run Code Online (Sandbox Code Playgroud)

但同样,我没有得到理想的结果.

问题:

我怎样才能在离子框架中居中?

html css angularjs ionic-framework

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

Angular ng-messages:如何检查密码确认?

情况:

我正在使用ng-messages指令在我的角度应用程序中进行即时验证.一切都很好,除了一件事:我需要验证字段'密码确认',不知道该怎么做.

代码:

<form name="autentication_form" novalidate="" ng-submit="submit_register()">

    <label class="item item-input">
        <span class="input-label">Email</span>
        <input type="text" name="email" ng-model="registerData.email" required>

        <div class="form-errors" ng-messages="autentication_form.email.$error" role="alert" ng-if='autentication_form.email.$dirty'>
            <div class="form-error" ng-message="required">You did not enter the email</div>
        </div>
    </label>

    <label class="item item-input">
        <span class="input-label">Password</span>
        <input type="password" name="password" ng-model="registerData.password" required>

        <div class="form-errors" ng-messages="autentication_form.password.$error" role="alert" ng-if='autentication_form.password.$dirty'>
            <div class="form-error" ng-message="required">Please enter the password</div>
        </div>
    </label>

    <label class="item item-input">
        <span class="input-label">Password confirmation</span>
        <input type="password" name="password_confirmation" ng-model="registerData.password_confirmation" required>

        <div class="form-errors" ng-messages="autentication_form.password_confirmation.$error" role="alert" ng-if='autentication_form.password_confirmation.$dirty'>
            <div class="form-error" ng-message="required">Password confirmation required</div>
        </div>
    </label> …
Run Code Online (Sandbox Code Playgroud)

javascript validation angularjs ionic-framework ng-messages

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

离子2 - 如何管理全局变量?

情况:

在我的Ionic 2应用程序中,我有一个简单的登录,其中包含在右侧菜单中.单击标题中的右侧图标 - 将显示带有登录表单的菜单.

登录代码位于app.component内,登录视图为app.html.成功登录会将布尔全局变量 - loginState - 设置为true.

目标是每个其他组件 - 导入全局变量 - 都可以知道登录状态.

问题是 - 在成功登录后,我需要看到更改立即反映在homePage组件上,但事实并非如此.

例如,在主页上,登录后应立即为您提供某些内容.

代码:

这是我在一个名为global.ts的单独文件中设置全局变量的地方,然后我将其导入其他组件:

export var global = {
    loginState : false
};
Run Code Online (Sandbox Code Playgroud)

app.component:

这是我导入全局变量并在成功登录后将其设置为true的应用程序组件:

import {global} from "./global";

loginSubmit()
{
    var email = this.loginForm.value.email.trim();
    var password = this.loginForm.value.password.trim();

    this.userService.submitLogin(email, password)
        .subscribe((response) => {
            if(response.result == 1) 
            {
                global.loginState = true;
                this.menu.close();
            }
        }, (error) => {
            console.log(error);
        });

}
Run Code Online (Sandbox Code Playgroud)

问题:

应该采取什么方式来处理全局变量的变化,这些变量会立即反映在其他组件上?

我可以从app.component调用homePage组件方法吗?

谢谢!

ionic-framework ionic2 angular

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

如何删除焦点上的占位符

我创建了这个简单的函数,在不支持它的浏览器中添加占位符:

DEMO

问题是:当用户在其中单击时,如何添加该功能以删除占位符?

javascript jquery focus placeholder

22
推荐指数
3
解决办法
6万
查看次数

离子:如何在多条线上显示离子项?

情况:

我正在使用Ionic来构建应用程序.

我需要显示一些关于某些人的信息列表.为了获得我使用离子列表 <ion-list>以及<ion-item>它提供它的布局正是我需要的.

唯一的问题是,每个人<ion-item>似乎都被迫留在一条线上,切断它所包含的额外文字,如图所示:

在此输入图像描述

代码:

<ion-list>
    <ion-item class="item"> Name: <b> {{ person.name }} </b> </ion-item>
    <ion-item class="item"> Email: <b> {{ person.email }} </b> </ion-item>
    <ion-item class="item"> Title: <b> {{ person.title }} </b> </ion-item>
    <ion-item class="item"> Bio: <b> {{ person.bio }} </b> </ion-item>
</ion-list>
Run Code Online (Sandbox Code Playgroud)

PLUNKER:

这是一个重新创造这种情况的掠夺者.您可以尝试调整浏览器或内部窗口的大小,您可以看到ion-item如何删除额外的内容.

http://plnkr.co/edit/Qx9fYRpiATK4lgj5g5Rk?p=preview

问题:

如何在<ion-item>元素中显示额外内容?
是否可以以多行显示内容?

javascript css android angularjs ionic-framework

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

无法在数据库中存储表情符号

情况:

如果已经提出这个问题,请提前抱歉,但解决方案对我不起作用.

无论我尝试什么,我都不能将表情符号存储在我的数据库中.他们被保存为????.
正确保存的唯一表情符号只需要3个字节,如害羞的脸或太阳.

实际的utf8mb4无效.

数据库截图

它已经在Android和Ios上进行了测试.结果相同.

版本:

Mysql:5.5.49
CodeIgniter:3.0.0

步骤:

  1. 我修改了数据库字符集和排序规则属性.

    ALTER DATABASE my_database CHARACTER SET = utf8mb4 COLLATE = utf8mb4_unicode_ci

  2. 我修改了表字符集和排序规则属性.

    ALTER TABLE table_name CONVERT TO CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci

  3. 我在可能的情况下将表的每个字段设置为Encoding:UTF-8(ut8mb4)和Collat​​ion:utf8mb4_unicode_ci

  4. 我在CodeIgniter应用程序中修改了数据库连接.

  5. 我运行了以下内容: SET NAMES utf8mb4 COLLATE utf8mb4_unicode_ci

  6. 最后我也试过这个: REPAIR TABLE table_name; OPTIMIZE TABLE table_name;

一切都应该设置正确,但它不起作用.

数据库设置:

这是运行以下命令的结果:

`SHOW VARIABLES WHERE Variable_name LIKE 'character\_set\_%' OR Variable_name LIKE 'collation%';`
Run Code Online (Sandbox Code Playgroud)

数据库设置

表设置:

表结构的screeshot:

表设置

数据库连接:

这些是database.php中的数据库连接设置(注意这不是唯一的数据库,还有其他使用utf8连接的数据库)

$db['my_database'] = array(
        'dsn'           => …
Run Code Online (Sandbox Code Playgroud)

php mysql android codeigniter ios

19
推荐指数
1
解决办法
9240
查看次数

Angular ui-select只过滤一个字段

情况:

我有一个角度应用程序使用角度ui-select来搜索和选择数据库中的人.

除了一件事,它工作得很好.用户应该能够使用两个标准在人员之间进行过滤:姓名和电子邮件.

使用普通角度滤波器,我只能过滤其中一个.如果我尝试过滤这两个字段,它就不再起作用了.

具有一个字段的工作示例:

 <ui-select multiple ng-model="database_people.selectedPeople" theme="select2" ng-disabled="disabled" style="width:100%">

    <ui-select-match placeholder="Select person...">{{$item.name}} &lt; {{$item.email}} &gt;</ui-select-match>

    <ui-select-choices repeat="person2 in list_people | filter: {name: $select.search, db_data_type_id: 5}">

            <div ng-bind-html="person2.name | highlight: $select.search"></div>

                <small>
                    email: <span ng-bind-html="''+person2.email | highlight: $select.search"></span>
               </small>

    </ui-select-choices>

 </ui-select>
Run Code Online (Sandbox Code Playgroud)


在过滤器中没有两个字段的工作示例:

 <ui-select multiple ng-model="database_people.selectedPeople" theme="select2" ng-disabled="disabled" style="width:100%">

    <ui-select-match placeholder="Select person...">{{$item.name}} &lt; {{$item.email}} &gt;</ui-select-match>

    <ui-select-choices repeat="person2 in list_people | filter: {name: $select.search, email: $select.search, db_data_type_id: 5}">

            <div ng-bind-html="person2.name | highlight: $select.search"></div>

                <small>
                    email: <span ng-bind-html="''+person2.email | highlight: …
Run Code Online (Sandbox Code Playgroud)

javascript filter angularjs angular-ui

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

如何在ng-repeat中正确执行函数

情况:

我正在AngularJs中创建一个分配权限的应用程序.为了做到这一点,我有三个嵌套的ng-repeat.

第一个循环:显示PERMISSION GROUP

第二个循环:为每个权限组显示CATEGORIES.在此循环内执行一个函数,该函数将获取每个类别的所有SUB CATEGORIES

第三个循环:显示SUB CATEGORIES

问题:

问题在于在第二个循环内执行函数.

ATTEMPT 1 - ng-init:

<div class="row" ng-repeat="permission_group in list_permission_groups">
  <div class="col-sm-3">
    <h3>
      {{permission_group.permission_group_name}} 
    </h3>
  </div>
  <div class="col-sm-9">
    <ul>
      <li ng-repeat="category in list_categories">
        <span>
          {{ category.name }} 
        </span>            
        <div class="checkbox">
          <label>                
            <div ng-init="temp_result = get_Sub_Categories(category.category_id)">                  
              <p ng-repeat="sub_category in temp_result">
                {{ sub_category.name }} 
              </p>                  
            </div>               
          </label>
        </div>           
      </li>
    </ul>
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

在控制器中:

$scope.get_Sub_Categories = function(category_id) {
    $http({

        url: base_url + 'main/json_get_list_sub_categories',
        data: {
            category_id: category_id
        },
        method: "POST"

    }).success(function(data) …
Run Code Online (Sandbox Code Playgroud)

javascript php angularjs angularjs-ng-repeat

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

使用https $ http请求状态0

情况:

我正在开发一个从API接收数据的Ionic应用程序.

之前,API在http://地址上,一切正常.

然后我们将API移动到https://并且它不再起作用了.或者,它仍然可以在浏览器中访问它,但不能在手机(或模拟器)中访问它.

我不确定可能是什么问题.在控制台日志中,我看到请求的状态为0.

它可能与白名单,标题或CORS有关.我尝试了几种方法但没有效果.

白名单:

在config.xml之前有这个白名单:

<allow-navigation href="http://*/*" /> 
Run Code Online (Sandbox Code Playgroud)

我曾尝试以多种方式修改它,但这并没有解决问题.例如,我尝试过:

<allow-navigation href="https://*/*" /> 
Run Code Online (Sandbox Code Playgroud)

<allow-navigation href="*" />
Run Code Online (Sandbox Code Playgroud)

API请求:

这是API请求的一个示例:

$http.get( 'https://MY_DOMAIN.com/mobile/list_mobile_project/' ,{},{"headers" : {"Content-Type" : "application/x-www-form-urlencoded; charset=UTF-8" }})
     .success(function(data, status, headers, config) 
     {
             // code
     }).
     error(function(data, status, headers, config) 
     {
         console.log('Error with the API list_mobile_project');
         console.log(data);
         console.log(status);
         console.log(headers);
         console.log(config);
     });
Run Code Online (Sandbox Code Playgroud)

API响应:

这是API响应的一个例子:

public function list_mobile_project()
{
    header('Access-Control-Allow-Origin: *');
    header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept"); 

    // code

    echo json_encode( $project_list );
}
Run Code Online (Sandbox Code Playgroud)

问题:

如何让API在HTTPS上运行?

如果是与CORS相关的问题,如何在服务器端启用它?

https android ios angularjs ionic-framework

16
推荐指数
1
解决办法
2458
查看次数