使用jQuery append方法添加元素，但元素中的类是无效的？

Question

我使用jQuery append方法在angular项目中添加元素，但是元素中的类是无效的，有我的代码。元素可以添加到文档中，但样式无效。

constructor() {

    jQuery(document).ready(function () {
      jQuery('#add-device').on('click', function () {
        console.log('click');
        jQuery('#form-content').append('<div>\n' +
          '          <p class="custom-item1">01</p>\n' +
          '          <div class="custom-item2">\n' +
          '            <select>\n' +
          '              <option value="1">Option 1</option>\n' +
          '              <option value="2">Option 2</option>\n' +
          '              <option value="3">Option 3</option>\n' +
          '            </select>\n' +
          '          </div>\n' +
          '          <div class="custom-item3">\n' +
          '            <select>\n' +
          '              <option value="1">Option 1</option>\n' +
          '              <option value="2">Option 2</option>\n' +
          '              <option value="3">Option 3</option>\n' +
          '            </select>\n' +
          '          </div>\n' +
          '          <a class="custom-item4"><img src="../../../../assets/images/notice.png"></a>\n' +
          '        </div>');

      });

      jQuery('#form-content').on('click', '.delete', function () {
        console.log('delete');
        if (jQuery('#inputView').children().length !== 1 ) {
          jQuery(this).parent().remove();
        }

      });
    });
  }

.custom-item1 {
  flex: 1;
}

.custom-item2 {
  flex: 3;
}

.custom-item3 {
  flex: 3;
}

.custom-item4 {
  flex: 1;
}

.form-custom-content > div {
  padding-top: 1rem;
  padding-bottom: 1rem;
  display: flex;
  text-align: center;
}

任何人都知道为什么以及如何解决这个问题。谢谢