Question

我正在构建Angular反应形式。我正在插入一个api，并使用*ngFor遍历元素。

我渲染了3个单选按钮。如果选择“是”单选按钮，它将显示一个附加文本框，并在选择其他单选按钮时再次隐藏。

问题是我希望文本框直接显示在单选按钮的下方，但是由于它们是动态的，因此它们都具有与文本框之前相同的div位置。

例如

<div><input type="radio" value="yes" /><div>
<div><input type="radio" value="no" /><div>
<div><input type="radio" value="maybe" /><div>
<textarea />

所需结果。

<div><input type="radio" value="yes" /><div>
 <textarea />
<div><input type="radio" value="no"/><div>
<div><input type="radio" value="maybe"/><div>

有什么方法可以操纵dom以获得所需的效果？

这是一个StackBlitz示例-https://stackblitz.com/edit/angular-pmupp3?file=src/app/personal/personal.component.html

Answer 1

http
  .sessionManagement()
  .sessionCreationPolicy(SessionCreationPolicy.STATELESS)
  .and()
  .addFilterAfter( new Filter() {
      @Override
      public void init(FilterConfig filterConfig) throws ServletException {

      }

      @Override
      public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
          HttpServletRequest httpServletRequest = ((HttpServletRequest) request);
          if(httpServletRequest.getRequestURI().startsWith("/app/") || httpServletRequest.getRequestURI().startsWith("/rest/")) {
              // Do you secured filter computations

          } 
          chain.doFilter(request, response);
      }

      @Override
      public void destroy() {

      }}, UsernamePasswordAuthenticationFilter.class)
  .csrf()
  .disable() // Disabled, cause enabling it will cause sessions
  .headers()
  .frameOptions()
  .sameOrigin()
  .addHeaderWriter(new XXssProtectionHeaderWriter())
  .and()
  .authorizeRequests()
  .antMatchers("/app/**", "/rest/**")
  .hasAuthority(DefaultPrivileges.ACCESS_TASK)
  .anyRequest()
  .permitAll();

您可以在循环内检查item.section是否为“ yes”以及是否选择了yes值。 stackblitz链接：https://stackblitz.com/edit/angular-jn3ln6?file=src%2Fapp%2Fpersonal%2Fpersonal.component.html

Answer 2

您可以尝试使用CSS直观地排列元素。例如，如果您在父级上使用display: grid放置单选按钮，则可以在子级上设置order: <number>来更改元素的显示顺序。

在UI上重新放置动态渲染的元素

2 个答案: