小编Lem*_*nur的帖子

我一直在尝试对用户动态添加的div使用FormArray，但是找不到用户输入的控件！我总是有错误：

错误：找不到路径为“ textoAvisos-> 0-> assTipo”的控件

错误：无法找到路径为“ textoAvisos-> 0-> msgTipo”的控件

错误：找不到路径为“ textoAvisos-> 0-> dataTipo”的控件

div包含3个用户需要插入的输入，看来控件找不到它们。用户单击按钮后会添加新的div，因此为什么它需要动态，但这不是问题。我现在不必担心推入式插入，因为我需要首先验证用户的输入！

这是HTML：

<form style="text-align: center;" [formGroup]="janelaAtualizacaoForm" (ngSubmit)="cadastrarJanelaAtualizacao()">
    <div *ngFor="let disparaEmail of disparaEmails; let i=index" formArrayName="textoAvisos" class="ui-g-4" style="margin-right: 10px; border: 1px solid #c8c8c8; border-radius: 5px; min-width: 466.828px;">

        <div [formGroupName]="i">
            <p class="titulo-campo font1 fw700">Assunto:</p>
            <textarea pInputTextarea [rows]="2" formControlName="assTipo" required style="width: 100%; resize:unset; font-size: 18px;"></textarea>

            <p class="titulo-campo font1 fw700">Tipo de Aviso:</p>
            <p-editor [style]="{'height':'300px'}" formControlName="msgTipo" required></p-editor>

            <p class="titulo-campo font1 fw700">Data:</p>
            <p-calendar [readonlyInput]="true" formControlName="dataTipo" dateFormat="dd/mm/yy" showButtonBar="true" [locale]="localeService.getLocale()"[monthNavigator]="true" [yearNavigator]="true" yearRange="2018:2050" required></p-calendar>
        </div>

    </div> …

我已经遵循了很多教程，但到目前为止，我还没有设法让 PrimeNG 的编辑器模块显示出来！（其他模块（例如 Toast 或按钮）工作正常，只是编辑器无法工作）。

所以这就是我所做的：

在 app.module.ts 中导入模块

import { EditorModule } from 'primeng/editor';

已安装的软件包

npm install quill --save

npm install @types/quill --save

更新了 angular-cli.json

"styles": [ "../node_modules/quill/dist/quill.core.css", "../node_modules/quill/dist/quill.snow.css", ] 
"scripts": [ "../node_modules/quill/dist/quill.js" ]

以 2 种不同的方式插入 HTML

<p-editor [(ngModel)]="text" [style]="{'height':'320px'} ngDefaultControl"></p-editor>

<form style="text-align: center; margin: 0 auto; width: auto" [formGroup]="avisoForm" (ngSubmit)="atualizarCargo()">
...
<p-editor formControlName="msgAviso" [style]="{'height':'320px'}" ngDefaultControl></p-editor>

</form>

在 TS 文件中引用它们

this.avisoForm = new FormGroup({
        msgAviso: new FormControl,
        titAviso: new FormControl
    })

text: string;

然而，它不会向最终用户显示任何内容，即使那里显示了 p-editor 标签：

最终用户屏幕

我认为这可能是 …

用户访问卡后更改屏幕时遇到问题。每当客户端访问卡、更改屏幕并返回到之前的相同组件时，组件状态集都会重置。

该应用程序的工作原理如下。客户端访问他们请求的报价列表 (QuotesRequestedListScreen)。该列表是从 Firebase 加载的，因此指示加载活动的状态首先设置为 true。加载完成后，应用程序将显示卡片中的所有数据。客户端点击卡片后，屏幕发生变化并显示卡片信息。但是，如果客户端返回到上一个屏幕，屏幕将永远显示加载活动图标，直到再次更改屏幕。

我尝试使用React Navigation 提供的状态持久性，但当我尝试返回报价列表屏幕（QuotesRequestedListScreen）时它不起作用。

有人知道在更改屏幕时保持状态的最佳方法是什么？谢谢！

主报价屏幕

const QuoteScreen = (props) => {
  
  const QuotesRequestedScreen = () => {
    return (
      <Stack.Navigator headerMode="none" initialRouteName="Quote List">
        <Stack.Screen name="Quote List" component={QuotesRequestedListScreen} />
        <Stack.Screen name="Card" component={QuoteRequestedCardScreen} />
      </Stack.Navigator>
    );
  };

  return (
    <Tab.Navigator initialRouteName="Request Quote">
      <Tab.Screen name="Request Quote" component={RequestQuoteScreen} />
      <Tab.Screen name="Quotes Requested" component={QuotesRequestedScreen} />
    </Tab.Navigator>
  );
};

export default QuoteScreen;

报价请求列表屏幕

const QuotesRequestedListScreen = (props) => {
  //Getting userID for the useEffect
  let userId = useSelector((state) …

我有一个自动完成组件，需要加载大量数据列表（最多 6000 个元素）并根据用户的输入显示相应的建议。

由于数据选项有很多元素，每当用户开始在慢速计算机上打字时，它都会变慢并且需要一些时间来加载所有内容。我必须阻止它，所以我想到了在用户输入第三个字符后显示用户建议的想法。每当用户单击输入框时，它甚至会给我这个错误：

警告：React 检测遇到错误：RangeError：超出控制台的最大调用堆栈大小。

我需要在第三个字符输入后显示建议。我曾尝试使用getOptionDisabled 建议和 limitTags，但它们不起作用。

这是代码：

const NameSelect = (props) => {
  return (
    <Dialog>
        <React.Fragment>
          <DialogTitle id="search-name-dialog-title">
            Search name
          </DialogTitle>
          <DialogContent>
                <Autocomplete
                  id="combo-box-client-select"
                  options={props.NameList}
                  value={props.preSelectedName}
                  
                  getOptionLabel={(option) =>
                    option.Name_name +
                    ", " +
                    option.country +
                    ", " +
                    option.city
                  }
                  onChange={(object, value) => {
                    props.preSelectedNameSet(value);
                  }}
                  renderInput={(params) => (
                    <TextField
                      {...params}
                      label="Search name"
                      variant="outlined"
                      fullWidth
                    />
                  )}
                />
              .
              .
              .
    </Dialog>
  );
};

有人可以帮助我采用这种方法，或者建议一种更好的方法吗？谢谢！