小编Mar*_*vic的帖子

我正在尝试将ngModel传递给函数并获得更改,

我不知道使用的方式.

这就是我现在得到的:

          <ion-input text-right
               formControlName="monday"
               type="number" pattern="[0-9]*"
               placeholder="00.00"
               [(ngModel)]="monday"
               (keypress)="onChange(monday)">
           </ion-input>

           <ion-input text-right
               formControlName="tuesday"
               type="number" pattern="[0-9]*"
               placeholder="00.00"
               [(ngModel)]="tueasday"
               (keypress)="onChange(tuesday)">
           </ion-input>

.... 等等...

然后在我的page.ts我得到了

monday: string = '';
tuesday: string = '';
etc...

onChange(input: string){
//I want the input to correspond to my ngModel so it gets updated
    input = this.clientAction.transformInput(input);
}

我不想这样做:

this.monday = this.clientAction.transformInput(input);

因为你可能认为我一整天都这样,所以我不想每天都有这样的功能:

onChangeMonday(){};
onChangeTuesday(){};

我需要动态的东西.

我该如何解决这个问题？

提前致谢

[解决方案] @ AJT_82

而不是使用我的ngModel并尝试更新它,解决方案是从表单访问控件.

在您的page.html中

      <ion-input text-right
           formControlName="monday"
           type="number" pattern="[0-9]*"
           placeholder="00.00"
           [(ngModel)]="monday"
           (keypress)="onChange(monday, 'monday')">
       </ion-input>

然后在你的page.ts

onChange(input: string, …

假设我们有一个里面有 3 个链接的 div。

<div class="wrap">
    <a class="link">link1</a>
    <a class="link">link2</a>
    <a class="link">link3</a>
</div>

为了分配在jQuery的链接点击处理程序，我们可以做水木清华这样的： $('.wrap a').on('click', callback);。

在 Angular2 中最好的方法是什么？

据我所知，我可以对每个链接使用一个简单的（点击），例如: <a class="link" (click)="callback()">，但对我来说它看起来很奇怪。另一种选择是使用指令并做 smth like <a class="link" [directive]="value">，我更喜欢 这个。

是否有更好的描述案例的实现？

我收到一个错误，最终导致反应组件的测试崩溃。我使用 Apollo hook 进行突变useMutation，使用 Enzyme 通过 id 查找组件。

repo code\node_modules\react-dom\cjs\react-dom.development.js:154
      var evt = document.createEvent('Event'); // Keeps track of whether the user-provided callback threw an error. We
                         ^

TypeError: Cannot read property 'createEvent' of null

成分

repo code\node_modules\react-dom\cjs\react-dom.development.js:154
      var evt = document.createEvent('Event'); // Keeps track of whether the user-provided callback threw an error. We
                         ^

TypeError: Cannot read property 'createEvent' of null

测试

import React, { useEffect } from "react";
import { useMutation } from "@apollo/react-hooks";

export const MyComponent …

我有几种表单“登录、注册、创建产品...”对于这些表单，我使用 useState 处理前端错误，并使用 Express-validator 处理后端错误。

一切都很顺利，我收到了预期的错误消息。

但现在，我意识到这些表单都不再管理错误了。因为我设置了axios.interceptors.response.use如果用户处于 403 状态，则将其发送回登录页面（这是我处理过期令牌的方式）。

这是我的代码，通常会显示错误：\n（例如，这是我的登录页面，我只收到一条错误消息）

axios.interceptors.request.use(\n  (config) => {\n    config.headers.authorization = `Bearer ${localStorage.getItem(\'UserToken\')}`;\n    return config;\n  },\n  (error) => {\n    return Promise.reject(error);\n  },\n);\n\naxios.interceptors.response.use(\n  (response) => response,\n  (error) => {\n    if (error.response.status === 403) {\n      localStorage.clear();\n      window.location.href = \'/connexion\';\n    }\n  },\n);\n\nexport default function ConnexionPage() {\n  // Redirection Connexion r\xc3\xa9ussite vers Accueil\n  const history = useHistory();\n\n  const [errorForm, setErrorForm] = useState();\n\n  // Connexion\n  const handleSubmit = (event) => {\n    event.preventDefault();\n    login(event.target.email.value, event.target.password.value)\n …

问题：

未定义“Switch”react/jsx-no-undef。

我尝试导入开关模块，但它也不起作用。切换导入语句

import { Router, Route, Switch } from 'react-router-dom';

导入开关不起作用。

import './App.css';
import Checkout from './Checkout';
import Header from './Header';
import Home from './Home';
import { Router, Route } from 'react-router-dom';

function App() {
  return (
    <Router>
      <div className="app">
        <Header />

        <Switch>
          <Route path="/checkout">
            <Checkout />
          </Route>

          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

export default App;

我正在使用ngTemplateOutlet加载。但是它会多次加载模板。正在加载正确的模板，但会多次执行loadTemplate（）方法。

在HTML中：

<table>
    <thead>
    </thead>
    <tbody>
        <ng-template [ngTemplateOutlet]="loadTemplate()"></ng-template>
    </tbody>
</table>

<ng-template #template1>
    <tr *ngFor="iteration">
        <p>Hiii</p>
    </tr>
</ng-template>

<ng-template #template2>
    <tr *ngFor="iteration">
        <p>Byee</p>
    </tr>
</ng-template>

在我的component.ts中：

@ViewChild('template1') template1: TemplateRef<any>;
@ViewChild('template1') template1: TemplateRef<any>;
loadTemplate(){
    if (condition)
        return this.template1;

    return this.template2;
}

我想补充我的刀尖内换行，但它不工作，我尝试一切从\n，<br>，&013;/ &#13

这是我的代码：

<a>
 <img class="rounded-circle d-inline-block" src="{{content.image}}"  
 triggers="click" [autoClose]="true" ngbTooltip="{{content.email}} <br> 
 {{content.tel}}">
</a>

我在 React 中编写了一个可重用的输入类型 UI 组件，其中名称、描述等已根据使用位置动态更改

const InputType = props => {

  const { inputName, inputTypes, descriptionInput, onChangHandler, onBlurHandler, iconName } = props;

  return (
    <div className="a-input a-input--large">
      <label>{inputName}</label>
      <div className="m-input-tip ">
        <input type={inputTypes} onChange={onChangHandler} onBlur={onBlurHandler}>
          <div className="a-tip">
            {
              isNotNullOrDefined(iconName, true) &&
              <Icon />
            }
            <Icon className="a-icons--small" name={iconName} />
            <span>{descriptionInput}</span>
          </div>
        </input>
      </div>
      <div className="validation">This is a required field</div>
    </div>

  );

}

但是当我尝试像这样简单地执行它时，

return (
  <InputType
    inputName="Type what you want to search"
    inputTypes="text"
  />
);

我在控制台中收到这样的错误

未捕获的不变违规：输入是一个 void 元素标签，既不能有children也不能使用 …

所以我有这个要求，我试图提交一个由表格形式的五条记录组成的表格。这就是表的样子：

这是对应的代码：

<form [formGroup]="FeedBack" (ngSubmit)="ADDFeedback()">
  <table class="form-group">
    <tr>
      <th>Section</th>
      <th>Q.No</th>
      <th>Question Description</th>
      <th>Answer_ShortTxt.</th>
      <th>Answer_longTxt.</th>
      <th>Comments</th>
    </tr>
    <tbody>
      <tr *ngFor="let obj of QuestionsForSubmittedAnswersArray">
        <td>
          <input
            type="textarea"
            placeholder="{{obj.Section}}"
            [value]="obj.Section"
            class="form-control"
            id="Section"
            formControlName="Section"
          />
        </td>
        <td>
          <input
            type="text"
            placeholder="{{obj.QuestionIDId}}"
            [value]="obj.QuestionIDId"
            class="form-control"
            id="QuestionID"
            formControlName="QuestionID"
          />
        </td>
        <td>
          <input
            type="text"
            placeholder="{{obj.question}}"
            [value]="obj.question"
            class="form-control"
            id="question"
            formControlName="question"
          />
        </td>
        <td>
          <input
            type="text"
            placeholder="{{obj.Answer_ShortTxt}}"
            [value]="obj.Answer_ShortTxt"
            class="form-control"
            id="Answer_ShortTxt"
            formControlName="Answer_ShortTxt"
          />
        </td>
        <td>
          <input
            type="text"
            placeholder="{{obj.Answer_LongTxt}}"
            [value]="obj.Answer_LongTxt"
            class="form-control"
            id="Answer_LongTxt"
            formControlName="Answer_LongTxt"
          />
        </td>
        <td>
          <input
            type="text"
            class="form-control"
            id="Feedback"
            formControlName="FeedBack"
          />
        </td> …

我正在尝试App.js从后端将数据加载到我的文件中进行反应。我使用 redux 构建了从后端到前端的整个数据获取和存储管道。这是代码：

function App() {
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(getPosts());
  }, [dispatch]);
  const posts = useSelector((state) => state.posts);
  console.log(posts);
  return (
    <div>
      <h1>App</h1>
    </div>
  );
}

在上面的代码中，每当刷新时console.log，都会在谷歌控制台中显示数据两次。App.js如何让它只运行一次？